@font-face {
    font-family: 'some-sans';
    src: url('/font/ZalandoSans-VariableFont_wdth\,wght.ttf') format('truetype');
}

body {
  font-family: 'some-sans';
  font-weight: 500;
  font-size: 1rem;
  text-transform: lowercase;
  letter-spacing: -0.4px;
  color: #1d1d1d;
  background-color: #EBEBEB;
  padding: 16px;
  margin: 0;

  pointer-events: auto;   /* disable clicks until loaded */

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Smooth slide-up animation for tab content */
/* .fade-slide-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-slide-up.show {
  opacity: 1;
  transform: translateY(0);
} */


button{
   all: unset;
   box-sizing: border-box;
  border-bottom: 2px solid transparent;
}

.all-page-container{
  display: grid;
  grid-template-rows: auto;
  grid-template-columns:  auto;

}
.tabs{
  grid-area: 1 / 1 / 2 / 2;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr;

}


.container{
display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-gap: 5rem 1rem;
  margin-top: 5rem;
}
.main-navigation{
  grid-area: 1 / 1 / 2 / 2;
}
/* tabs styling */
.tab-buttons { cursor: pointer; display: flex; gap: 12px;}
.tab-button.active {border-bottom-color: #999;color: #999999; }



.content { display: none; }


.content.active { 
  display: grid;
grid-template-rows: auto;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 5rem 2.5rem;
  grid-area: 2 / 1 / 3 / 2; }
/* tabs styling */




.page-name{
  grid-area: 1 / 1 / 2 / 13;
  font-size: 4rem;
  letter-spacing: -2.4px;
  height: 4rem;
  /* margin-bottom: 40px; */
}
.para{
  font-size: 1.25rem;
  letter-spacing: -0.6px;
}
.h1{
color: #999;
  font-size: 1rem;
   font-weight: 600;
  letter-spacing: -0.64px;
}
.h5{
  font-size: 2rem;
  letter-spacing: -1.28px;
  line-height: 110%;
}
.h6{
  font-size: 3rem;
  letter-spacing: -2.4px;
  line-height: 115%;
}
.superscript-lvl-1{
  vertical-align: super;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.64px;
}
.about-me{
  display: grid;
  grid-template-rows: 1fr 1fr;  
  grid-template-columns: 1fr 1fr;
  grid-gap: 2.5rem;
  grid-area: 2 / 1 / 3 / 13;

}
.about-me-left{
 min-width: 380px; 
 max-width: 600px; 
 grid-area: 1 / 1 / 3 / 2;
}
.about-me-right{
  display: grid;
    grid-template-rows: 1fr; 
  grid-template-columns: 1fr 1fr 1fr;
  grid-area: 2 / 2 / 3 / 3;
  grid-gap: 0rem 5rem;
}
.works{
  display: grid;
  grid-area: 3 / 1 / 4 / 13;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin-top: -2rem;
}
.work-thumbnail{
  background-color: #D9D9D9;
  padding: 2.5rem 2.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}
.work-thumbnail:hover{
  background-color: #CCCCCC;
}
.project-header{
  margin-bottom: 4px;
}
.project-tag-line{
  margin-bottom: 56px;
}
.project-thumbnail img{
  max-width: 80%;
  /* min-width: 32.5rem; */

}
.project-thumbnail{
display: flex;
justify-content: center;
}

.one-line{
display: flex;
gap: 1rem;
}
.contact-info{
	grid-area: 2 / 1 / 3 / 13;

}
.btn{
  border-bottom: 2px solid #BA0000;
  cursor: pointer;
  color: #BA0000;
}


@media screen and (min-width: 300px) and (max-width: 799px) {


.about-me{
  display: grid;
  grid-template-rows: auto 5rem;  
  grid-template-columns: 1fr 1fr;
  grid-gap: 2.5rem;
  grid-area: 2 / 1 / 3 / 13;

}
    .about-me-left{
       /* min-width: 480px; 
 max-width: 600px;  */
 grid-area: 1 / 1 / 2 / 2;
}
  .about-me-right{
    display: grid;
    grid-template-rows: 1fr; 
  grid-template-columns: 1fr 1fr 1fr;
     grid-area: 2 / 1 / 3 / 3;
      grid-gap: 0rem 1rem;
     align-items: start;

  }

  .works{
  display: grid;
  grid-template-columns: 1fr;
}
    .work-thumbnail{
  padding: 2.5rem 2.5rem;
}
.page-name{
  font-size: 2rem;
}
.project-thumbnail img{
  max-width: 100%;
  /* min-width: 32.5rem; */

}

}

@media screen and (min-width: 800px) and (max-width: 999.5px){

 .about-me{
  display: grid;
  grid-template-rows: auto 5rem;  
  grid-template-columns: 1fr 1fr;
  grid-gap: 2.5rem;
  grid-area: 2 / 1 / 3 / 13;
}

    .about-me-left{
       /* min-width: 480px; 
 max-width: 600px;  */
 grid-area: 1 / 1 / 2 / 2;
}
 .about-me-right{
    display: grid;
    grid-template-rows: 1fr; 
  grid-template-columns: 1fr 1fr 1fr;
     grid-area: 2 / 1 / 3 / 3;
      grid-gap: 0rem 5rem;
     align-items: start;
  }

  .works{
  display: grid;
  grid-template-columns: 1fr;
}

    .work-thumbnail{
  padding: 2.5rem 2.5rem;
}
.project-thumbnail img{
  max-width: 100%;
  /* min-width: 32.5rem; */

}

}

@media screen and (min-width: 1000px) and (max-width: 1200.8px){

  .about-me{
  display: grid;
  grid-template-rows: auto 5rem;  
  grid-template-columns: 1fr 1fr;
  grid-gap: 2.5rem;
  grid-area: 2 / 1 / 3 / 13;

}
    .about-me-left{
       /* min-width: 480px; 
 max-width: 600px;  */
 grid-area: 1 / 1 / 2 / 2;
}

 .about-me-right{
    display: grid;
    grid-template-rows: 1fr; 
  grid-template-columns: 1fr 1fr 1fr;
     grid-area: 2 / 1 / 3 / 3;
      grid-gap: 0rem 5rem;
     align-items: start;
  }
    .works{
  display: grid;
  grid-template-columns: 1fr;
}
    .work-thumbnail{
  padding: 2.5rem 2.5rem;
}
.project-thumbnail img{
  max-width: 100%;
  /* min-width: 32.5rem; */

}
}


@media screen and (min-width: 1201px) and (max-width: 1560px){

.about-me{
  display: grid;
  grid-template-rows: auto 5rem;  
  grid-template-columns: 1fr 1fr;
  grid-gap: 2.5rem;
  grid-area: 2 / 1 / 3 / 13;

}
 
  .about-me-left{
     /* min-width: 480px; 
 max-width: 600px;  */
 grid-area: 1 / 1 / 2 / 2;
}
 .about-me-right{
    display: grid;
    grid-template-rows: 1fr; 
  grid-template-columns: 1fr 1fr 1fr;
     grid-area: 2 / 1 / 3 / 3;
     grid-gap: 0rem 5rem;
     align-items: start;
  }

  .work-thumbnail{
  padding: 2.5rem 2.5rem;
}

.project-thumbnail img{
  max-width: 100%;
  /* min-width: 32.5rem; */

}
}

/* PAGE SLIDE-UP ANIMATION — NO OPACITY */
.tab-content-slide {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-gap: 5rem 2.5rem;
  margin-top: 5rem;
  transform: translateY(100vh);     /* Start completely below screen */
  transition: transform 0.7s cubic-bezier(.77,0,.175,1);
  will-change: transform;
}

.tab-content-slide.active {
  transform: translateY(0);          /* Slide up into place */
}