@font-face {
    font-family: 'DejaVu Sans';
    src: url('./fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_regular_macroman/DejaVuSans-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DejaVu Sans';
    src: url('./fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_bold_macroman/DejaVuSans-Bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'DejaVu Sans';
    src: url('./fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_oblique_macroman/DejaVuSans-Oblique-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'DejaVu Sans';
    src: url('./fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_boldoblique_macroman/DejaVuSans-BoldOblique-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'DejaVu Sans';
    src: url('./fonts/dejavu-sans-fontfacekit/web fonts/dejavusans_extralight_macroman/DejaVuSans-ExtraLight-webfont.woff') format('woff');
    font-weight: lighter;
    font-style: normal;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'DejaVu Sans', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

main {
    padding: 1.75rem;
    padding-top: 5rem;
    padding-bottom: 3rem;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}

.top-bar {
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    padding: .7rem 1.5rem;
    background-color: white;
}

/* .logo-w-name {
    display: flex;
} */

.logo {
    padding-left: .75rem;
    padding-right: .75rem;
    height: 3rem;
    filter: invert(70%)
}

.landing-page {
  padding: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-text {
  display: flex;
  flex-direction: column;
}

.landing-page span {
  font-size: 2rem;
  font-weight: bolder;
}

.down-arrow {
  position: absolute;
  bottom: 4rem;
  border: solid black;
  border-width: 0 3px 3px 0;
  display: block;
  padding: 1rem;
  transform: rotate(45deg);
}

h1 {
  font-size: 2.5rem;
  color: rgb(190, 190, 190);
  margin: 0;
}

.subtext {
  margin: 0;
  font-weight: bold;
}

.end {
  text-align: center;
  opacity: 30%;
  font-size: 2.5rem;
}

hr {
  margin-top: 2.5rem;
}

b {
  color:rgb(100, 100, 100);
}

h2, h3, h4, h5, h6 {
  margin-top: 2rem;
  margin-bottom: 0.7rem;
  font-size: 1.5rem;
}

h3, h4, h5, h6 {
  opacity: 50%;
}

.name {
  font-weight: bold;
  margin: auto .3rem;
  color: rgb(100, 100, 100)
}

.main-nav-position {
    display: flex;
    justify-content: right;
    flex-grow: 1;
}

.main-nav {
    display: flex;
    gap: 2rem;
}

.main-nav a {
  font-size: .8rem;
}

.toggler, .hamburger {
    display: none;
}

.even-2-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

figure {
  max-width: 30rem;
  margin: 2rem auto;
}

figcaption {
  font-style: italic;
  color: rgb(177, 177, 177);
  margin-top: 0.3rem;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    font-style: italic;
    color: rgb(177, 177, 177);
    background-color: rgb(73, 73, 73);
}

.thumbnail img {
    width: fit-content;
    aspect-ratio: 16/9;
    object-fit: cover;
}

a {
    color: black;
}

header a, .projects a {
  text-decoration: none;
}

.projects p {
  margin-top: 0.2rem;
  border-right: .5rem solid rgb(196, 196, 196);
  border-top: .12rem solid rgb(196, 196, 196);
}

.footer-logo {
    filter: invert(100%);
    height: 1rem;
    margin-left: .75rem;
}

footer {
    background-color: black;
    padding-left: 1rem;
    padding-right: 1rem;
}

address {
    gap: 2rem;
    font-size: .7rem;
    display: flex;
    justify-content: center;
}

footer * {
    color: white;
}

blockquote {
  font-style: italic;
}

.sketchbook > img:first-of-type {
  display: none;
}

@media screen and (max-width: 45rem) {
    nav {
      display: none;
    }
    .footer-logo {
      height: 1.5rem;
    }

    .even-2-col-grid {
        grid-template-columns: 1fr;
    }

    .toggler{
    /* ALWAYS KEEPING THE TOGGLER OR THE CHECKBOX ON TOP OF EVERYTHING :  */
      visibility: visible;
      display: block;
      z-index: 4;
      height: 60px;
      width: 60px;
      position: fixed;
      top: .75rem;
      right: 1rem;
      cursor: pointer;
      opacity: 0;
      margin: 0;
    }
    
    .hamburger{
      z-index: 3;
      position: fixed;
      top: .75rem;
      right: 1rem;
      height: 60px;
      width: 60px;
      padding: 5px;
      /*border-bottom-left-radius: 8px;
      background-color: var(--dark-transparent);*/
      background-color: white;
    
    /* FOR DISPLAYING EVERY ELEMENT IN THE CENTER : */
    
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* CREATING THE MIDDLE LINE OF THE HAMBURGER : */
    
    .hamburger > div{
      position: relative;
      top: 0;
      right: 0;
      background: black;
      height: 2px;
      width: 60%;
      transition: all  0.4s ease;
    }
    
    /* CREATING THE TOP AND BOTTOM LINES : 
    TOP AT -10PX ABOVE THE MIDDLE ONE AND BOTTOM ONE IS 10PX BELOW THE MIDDLE: */
    
    .hamburger > div::before,
    .hamburger > div::after{
      content: '';
      position: absolute;
      top: -10px;
      background: black;
      width: 100%;
      height: 2px;
      transition: all  0.4s ease;
    }
    
    .hamburger > div::after{
      top: 10px;
    }
    
    /* IF THE TOGGLER IS IN ITS CHECKED STATE, THEN SETTING THE BACKGROUND OF THE MIDDLE LAYER TO COMPLETE BLACK AND OPAQUE :  */
    
    .toggler:checked + .hamburger > div{
      background: rgba(0,0,0,0); /*Not bothering with var because one-off*/
    }
    
    .toggler:checked + .hamburger > div::before{
      top: 0;
      transform: rotate(-45deg);
    }
    
    /* AND ROTATING THE TOP AND BOTTOM LINES :  */
    
    .toggler:checked + .hamburger > div::after{
      top: 0;
      transform: rotate(45deg);
    }
  
    /* MAIN MENU WITH THE WHITE BACKGROUND AND THE TEXT :  */
  
    .main-nav {
  
    /* APPLYING TRANSITION TO THE MENU :  */
  
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      right: 0;
      z-index: 2;
      background-color: white;
      padding: 6rem 2rem 1rem 2rem;
      align-items: center;
  
    /* HIDDEN INITIALLY  :  */
  
      visibility: hidden;
    }
  
    .main-nav > a {
      margin-top: 15px;
      margin-bottom: 15px;
      font-size: 34px;
    }
  
    /* IF THE TOGGLER IS CHECKED, THEN INCREASE THE WIDTH OF THE MENU TO 30% , CREATING A SMOOTH EFFECT :  */
  
    .toggler:checked ~ .main-nav{
      visibility: visible;
      animation: fadeIn 0.8s ease;
    }
    .toggler:checked ~ .bg-nav-block {
      visibility: visible;
      animation: fadeIn 0.8s ease;
    }
    .toggler:checked ~ .hamburger {
      background-color: #00000000;
    }
}

@media screen and (max-width: 27rem) {
  .logo {
    height: 10vw;
  }
  .name {
    font-size: 6.5vw;
  }
  .address {
    font-size: .5rem;
  }
  .toggler{
    top: .4rem;
  }
  .hamburger{
    top: .4rem;
  }
}