/* GENERAL DEFAULTS */
:root {
  --dark:#1c1c1c;
  --light:#FFFCF1;
  --neon:#E3FF43;
  --blue:#0177EB;
  --teal:#6EE9FF;
  --magenta:#E321E6;
  --pink:#EA81FA;
  --purple: #8800FF;
  --fontblack: 900;
  --fontextra: 800;
  --fontbold: 700;
  --fontsemi: 600;
  --fontmed: 500;
  --fontreg: 400;
  --fontlight: 300;
  --fontexlight: 200;
  --techy: "Space Mono", monospace;
  --classy: "Source Serif 4", serif;
}
* {
  box-sizing: border-box;
  scrollbar-color: #e3ff43a7 transparent;
}
@supports (not (-moz-appearance: none)) and (not (-webkit-hyphens: none)) { 
    html {
        scrollbar-gutter: stable;
    }
}
html {
  scroll-behavior: smooth; 
}
body{
    margin:0;
    background-color: var(--dark);
    color:var(--light);
    font-family: var(--techy);
    scrollbar-gutter: stable;
}
h1,h2,h3,h4,p,span{
   font-optical-sizing: auto;
}
a{
    text-decoration: none;
      color:var(--fontlight);
}
.active {
    color:var(--neon);
    text-decoration: underline;
}
.intextlink {
    text-decoration: underline;
    color:var(--teal);
    transition: cubic-bezier(.25,1,.5,1) 0.2s;
}
.intextlink2 {
    text-decoration: underline;
    color: #0058af;
    transition: cubic-bezier(.25,1,.5,1) 0.2s;
}
.intextlink:hover, .intextlink2:hover {
  color: var(--magenta);
  background-color: var(--neon);
}
.highlight {
    background-color: #e3ff43d4;
    color: var(--dark);
}
h1,h2{
  margin:0;
}
.top {
  display:none;
}
/*=============================================PROJECT CONTENT LAYOUT=============================================*/
.folder-container {
    display: grid;
    grid-template-areas:
        "nav nav"
        "title subtitle"
        "hero hero"
        ;
    grid-template-columns: 2fr 1fr;
    width:100vw;
}
.mainnav {
  grid-area: nav;
  width:100vw;
  height:7vh;
  position: relative;
  z-index: 1;   
  border: solid 1px var(--neon);  
}
.title {
  grid-area: title;
  height:15vh;
  width:68vw;
  border-left: solid 1px var(--neon);
  border-right: solid 1px var(--neon);
  border-bottom: solid 1px var(--neon);
}
.subtitle{
  grid-area: subtitle;
  height:15vh;
  width:32vw; 
  border-right: solid 1px var(--neon);
  border-bottom: solid 1px var(--neon);
}
.content-container{
  grid-area: hero;
  container-type: size;
  height:78vh;
  width:100vw; 
  border-left: solid 1px var(--neon);
  border-right: solid 1px var(--neon);
  border-bottom: solid 1px var(--neon);
  overflow-y: auto;
  scrollbar-gutter: stable;
}


/*=============================================NAVIGATION=============================================*/

.mainnav nav{
  display:flex;
  align-items: center;
  width:100%;
  height:100%;
  padding: 0 30px;
}
.mainnav nav a {
  padding: 10px;
  margin: 0 5px 0 5px;
  font-weight: bold;
  font-size: clamp(14px, 1.1vw, 1.5vw);
  transition: cubic-bezier(.25,1,.5,1) 0.2s;
}
.mainnav a:hover{
  color: var(--magenta);
  background-color: var(--neon);
}
 /*=============================================TITLE & SUBTITLE=============================================*/
.title, .subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
}
 /*=============================================TITLE*/
 .title {
  font-size: 6.5vw;
  font-family: var(--classy);
  font-weight: var(--fontextra);
  color: var(--neon);
}
 /*=============================================SUBTITLE*/
.subtitle {
  font-size: 1.5vw;
  font-family: var(--classy);
  font-weight: var(--fontsemi);
  font-style: italic;
  padding: 10%;
}

 /*=============================================HERO IMAGE=============================================*/
.content-container img{
  width:100%;
}
.hero-container {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hero-container img {
  max-width: 2000px;
}
.hero-vid {
  height: 78vh;
  width: 100%;
  max-width:2000px;
}

 /*=============================================WHOLE CASE STUDY=============================================*/
 .case-study {
  display:flex;
}
.proj-intro {
  padding: 3% 5%;
  font-size: 2.8vh;
  line-height: 1.5;
  width:100%;
  border-left: solid 15px var(--purple);
  border-right: solid 15px var(--purple);
  background-color: #8800ff2a;
  margin:0;
}
.proj-border {
  border-left: solid 1px var(--neon);
  border-right: solid 1px var(--neon);
  border-bottom: solid 1px var(--neon);
}
.full-border{
  border: solid 1px var(--neon);
}
 /*=============================================SIDE BAR*/
 .side-bar{
  position:sticky;
  top:0;
  height: 100cqh;
  width:27vw;
  container-type: size;
  border-top: solid 1px var(--neon);
  border-right: solid 1px var(--neon);
}
  /*=============================================STACK*/
  .stack{
    font-size: 2.8vw;
    color: var(--teal);
    container-type: size;
    height: 58cqh;
    width:100%;
    background-image: url(../images/projimages/grid.png);
    background-size: contain;
    font-family: var(--classy);
    font-weight: var(--fontlight);
  }
  .stack p{
    height: 33.33cqh;
    padding: 0 2vw;
    margin:0;
    display:flex;
    justify-content: left;
    align-items: center;
    border-bottom: solid 1px var(--neon);
  }
 /*=============================================DEETS*/
 .deets{
  font-size: 0.9vw;
  color: var(--teal);
  height: 42cqh;
  display:flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--classy);
 }
.deets ul{
  margin:0;
  padding:0;
}
.deets li {
  list-style:none;
  margin: 1.8vh 0;
  font-weight: var(--fontlight);
}
.deets li b {
  font-weight: var(--fontsemi);
}
.deets p{
  margin-bottom:0;
}
.deets p, .deets li{
  padding: 0 4.8vw 0 2vw;
}
/*=============================================CONTENT*/
.content{
  width:73vw;
  padding: 0;
}
.content section:first-child{
  margin-top:0;
}
.content section, #credits{
  height: fit-content;
  border: solid 1px var(--neon);
  padding: 3% 5%;
  margin: 3vh 0;
}
.content section:last-child {
  margin-bottom: 0;
}
.content section h2 {
  font-size: 6.8vh;
  font-family: var(--classy);
  font-weight: var(--fontblack);
  color: var(--neon);
}
section p, section ul li{
  font-size: 1.8vh;
  line-height: 3.2vh;
  width:77%;
}
/*=============================================VIDEOS*/
.video-wrapper {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
  background-color: #000;
  cursor: pointer;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
}
.small {
  height: 90vh;
}
.poster {
  position: absolute;
  z-index: 4;
  inset: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #1c1c1c20;
  transition: background cubic-bezier(.25,1,.5,1) 0.2s;
}
.video-wrapper:hover .poster::after {
  background: #1c1c1c05;
}
.play-button {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #3e3e3e;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform cubic-bezier(.25,1,.5,1) 0.2s, background cubic-bezier(.25,1,.5,1) 0.2s;
}
.video-wrapper:hover .play-button {
  transform: scale(1.06);
  background-color: var(--dark);
}
.play-button svg {
  width: 50px;
  height: 50px; 
  fill: var(--light);
}
.video-wrapper .player-mount, .video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.content video, .video-wrapper{
  width:100%;
  border: solid 1px var(--neon);
}

/*=============================================VIDEOS-small*/
.vid-block {
  display: flex;
  height:fit-content;
}
.vidholder {
  width: 33.33%;
  height:100%;
}
.vidholder {
  position: relative;
}
.vidholder .video-wrapper {
   border: solid 1px var(--neon);
}
.vidholder p {
  position: absolute;
  width:70%;
  bottom:5vh;
  left: 50%;
  margin:0;
  transform: translate(-50%, -50%);
  font-size: 0.75vw;
  background-color: #8800ff7a;
}
/*=============================================IMAGES-small*/
.proj-group-container{
  display:flex;
  flex-direction: column;
}
.proj-group-container img{
  border: solid 1px var(--neon);
}
.proj-subgroup{
  display: flex;
}
.proj-subgroup img {
  object-fit: cover;
  object-position: center;
}
.proj-subgroup .group2 {
  width:60%;
  border-top: none;
  border-right: none;
}
.proj-subgroup .group3 {
  width:40%;
  border-top: none;
}
.credits {
  font-size: 2.8vh;
  font-family: var(--classy);
  font-weight: var(--fontblack);
  color: var(--neon);
}
 /*
=====================================================================================
========================================= [ MEDIA QUERIES ] =========================
=====================================================================================
*/
@media (orientation:portrait) {
  .top {
    display:flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 5;
    right:0;
    top:95%;
    transform: translate(-50%, -50%);
    font-size: 8vw;
    color: var(--neon);
    border: 1px solid var(--neon);
    height: 5vw;
    width:5vw;
    background-color: #1c1c1c6f;
  }
  .top a {
    padding-top: 50%;
  }
  .mainnav {
    position: fixed;
    background-color: #1c1c1c;
  }
  h1{
    margin-top:7vh;
  }
  .folder-container {
    display: grid;
    grid-template-areas:
        "nav"
        "title"
        "subtitle"
        "hero"
        ;
    grid-template-columns: 1fr 1fr;
    width:100%;
  }
  .title, .subtitle, .side-bar, .content{
    width:100%;
  }
  .title, .subtitle, .content{
    height: fit-content;
  }
  .title{
    font-size: 8.8vw;
    padding: 1%;
  }
  .subtitle{
    font-size: 3.6vw;
    padding: 2% 7%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-vid {
    height: fit-content;
    width: 100%;
  }

  .content-container { 
    overflow-y:unset;
    height:fit-content;
  }
  .side-bar {
    position: static;
    height: 75vh;
    border: 1px solid var(--neon);
  }
  .stack {
    font-size: 9vw;
    height: 50cqh;
  }
  
  .stack p {
    padding: 0 8%;
  }
  .deets{
    font-size: 3vw;
    padding: 0 8%;
    height: 50cqh;
  }
  .case-study {
    flex-direction: column;
  }
  .content section, #credits {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .content section h2 {
    font-size: 4.8vh;
  }
  .proj-intro{
    margin: 0 auto;
    font-size: 2.2vh;
  }
  section p, .proj-intro, #credits p {
    width: 85%;
  }
  .vid-block {
    flex-direction: column;
  }
  .vid-block .vidholder{
    width: 100%;
    margin: 0 0 3vh 0;
  }
  .vid-block div:last-child {
    margin-bottom:0;
  }
  .vidholder {
    position: static;
  }
  .large{
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .vidholder p {
    position: static;
    width:100%;
    transform: none;
    font-size: 3.8vw;
    text-align: center;
    padding: 3% 0;
  }
  .proj-subgroup{
    flex-direction: column;
  }
  .proj-subgroup .group2 {
    width:100%;
    border-right: solid 1px var(--neon);
  }
  .proj-subgroup .group3 {
    width:100%;
  }
}
@media (orientation: portrait) and (max-width:500px){
    .deets {
      font-size: 1.8vh;
    }
 }
 @media (orientation: landscape) {
  .content section, .content video, .video-wrapper, .proj-border, #credits, .vidholder .video-wrapper, .proj-group-container .group1, .proj-group-container .group2, .full-border{
    border-left:none;
  }
}
 @media (orientation: landscape) and (max-width:1440px){
    .deets {
      font-size: 1.2vw;
    }
 }

@media (orientation: landscape) and (max-height: 720px) {
.mainnav {
        width: 100vw;
        height: fit-content;
    }
    section p, section ul li{     
      font-size: 1.8vw;
      line-height: 3.2vw;
      width:100%;
    }  
    .credits {
      font-size: 4.8vh;
    }  
  }
  @media (orientation: landscape) and (max-height: 440px) {
    .stack {
      height: 38vh;
    }
    .deets {
      height: 37vh;
    }
    .deets p {
      margin-top:0;
    }
  }

@media (orientation:portrait) and (min-height:1921px){
    .mainnav {
        height: 4.5vh;
    }
    .mainnav nav a {
        font-size: 1.6vw;
    }
  }
@media (orientation: landscape)and (min-height:1440px) {
  .mainnav nav a {
    font-size: 0.8vw;
  }
}