@font-face {
    font-family: 'DejaVu Sans';
    src: url('/static/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('/static/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('/static/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('/static/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('/static/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: 1rem;
    padding-top: 7rem;
    padding-bottom: 3rem;
    max-width: 85rem;
    margin-left: auto;
    margin-right: auto;
}

header {
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: white;
    border-bottom: 0.1rem solid black;
}

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

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

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

h1 {
  display: none;
  font-size: 2.5rem;
  color: rgb(143, 143, 143);
  /* padding-left: 1rem; */
  /* border-left: 1rem solid rgb(59, 195, 219); */
  /* border-bottom: .12rem solid rgb(196, 196, 196); */
}

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

.main-nav-position {
    display: flex;
    justify-content: right;
    flex-grow: 1;
    padding-right: 2rem;
    border-right: .5rem solid rgb(196, 196, 196);
}

.main-nav {
    display: flex;
    gap: 2rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: .8rem;
}

.toggler, .hamburger {
    display: none;
}

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

.uneven-column {
	display: flex;
	gap: 4rem;
}

.uneven-column-grid {
  display: grid;
  gap: 3rem;
  grid-template-columns: 25rem 1fr;
}

.side-info {
	min-width: 20rem;
	max-width: 30%;
	/*background-color: rgb(240,240,240);*/
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
    shape-margin: 1rem;
}

.thumbnail img {
  width: fit-content;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: -1;
}

.thumbnail {
	position: relative;
}

.title {
  z-index: -1;
  opacity: 0;
  display: block;
	position: absolute;
	top: 0;
	left: 0;
	padding: 8rem 1rem;
	text-align: center;
	font-weight: bold;
	color: white;
	background-color: rgba(27, 27, 27, 0.726);
	min-width: 100%;
	min-height: 100%;
  transition: all 0.3s ease-in-out;
}

.thumbnail:hover .title {
	opacity: 100%;
}

a {
  color: black;
}

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

a:hover:not(.thumbnail) {
  opacity: 60%;
}

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

.projectContent p {
  margin-left: 1.5rem;
}

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

footer {
    display: flex;
    background-color: black;
    padding-left: 1rem;
    padding-right: 1rem;
    gap: 1rem;
    align-items: center;
}

address {
    padding-left: 1rem;
    gap: 2rem;
    font-size: .7rem;
}

footer * {
    color: white;
}

blockquote {
  font-style: italic;
}

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

.back-button {
  background-color: orange;
}

@media screen and (max-width: 82rem) {
  main {
    margin-left: 5rem;
    margin-right: 5rem;
  }
	.uneven-column {
		flex-direction: column-reverse;
	}
	.side-info {
		max-width: 100%;
	}
  .side-info img {
    display: block;
    margin: auto;
  }
}

@media screen and (max-width: 70rem) {
  main {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

@media screen and (min-width: 45rem) {
  address {
    display: flex;
  }
}

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

    header {
        width: 100%;
    }

    .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: 0;
      right: 1rem;
      cursor: pointer;
      opacity: 0;
      margin: 0;
    }
    
    .hamburger{
      z-index: 3;
      position: fixed;
      top: 0;
      right: 1rem;
      height: 60px;
      width: 60px;
      padding: 5px;
      /*border-bottom-left-radius: 8px;
      background-color: var(--dark-transparent);*/
    
    /* 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: 2rem;
    }
  
    /* 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: 5vw;
  }
  .name {
    font-size: 3vw;
  } */
  .address {
    font-size: .5rem;
  }
  .toggler{
    top: .4rem;
  }
  .hamburger{
    top: .4rem;
  }
}