@font-face {
    font-family: 'Unbounded';
    src: url('Unbounded-Regular.ttf'); /* IE9 Compat Modes */
    src: url('Unbounded-Regular.ttf') format('truetype'), /* IE6-IE8 */
         url('Unbounded-Regular.ttf') format('truetype'), /* Super Modern Browsers */
         url('Unbounded-Regular.ttf') format('truetype'), /* Pretty Modern Browsers */
         url('Unbounded-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('Unbounded-Regular.ttf') format('truetype'); /* Legacy iOS */
  }
  
@font-face {
    font-family: 'UnboundedBold';
    src: url('Unbounded-Bold.ttf'); /* IE9 Compat Modes */
    src: url('Unbounded-Bold.ttf') format('truetype'), /* IE6-IE8 */
         url('Unbounded-Bold.ttf') format('truetype'), /* Super Modern Browsers */
         url('Unbounded-Bold.ttf') format('truetype'), /* Pretty Modern Browsers */
         url('Unbounded-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('Unbounded-Bold.ttf') format('truetype'); /* Legacy iOS */
  }

 @font-face {
    font-family: 'Montserrat';
    src: url('Montserrat-VariableFont_wght.ttf'); /* IE9 Compat Modes */
    src: url('Montserrat-VariableFont_wght.ttf') format('truetype'), /* IE6-IE8 */
         url('Montserrat-VariableFont_wght.ttf') format('truetype'), /* Super Modern Browsers */
         url('Montserrat-VariableFont_wght.ttf') format('truetype'), /* Pretty Modern Browsers */
         url('Montserrat-VariableFont_wght.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('Montserrat-VariableFont_wght.ttf') format('truetype'); /* Legacy iOS */
  }
  
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  color: black;
  background-color: white;
  font-family: Unbounded, Arial, Helvetica, sans-serif;
  font-weight: 700;
}

html {
      color: black;
}

.wrapper {
  height: 12vh;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  background-color:rgb(255, 255, 255);
}

.info-container {
  background: white;
  transform: translateZ(0) scale(1) translateY(90px);
  z-index: 8;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/*your own code from og site below */

nav {
    display: flex;
    width: 100%;
    border-bottom: 1px solid var(--border-color);
    padding-top: 2vh;
}

nav > .nav-section {
    display: flex;
    gap: 0;
    box-sizing: border-box;
    align-items: flex-end;
    justify-content: flex-end;
}

#nav-logo-section {
    padding-top: 2vh;
    padding-right: 5vw;
    padding-bottom: 2vh;
    padding-left: 3vw;
    justify-content: flex-start;
    width:50%;
}

#nav-links-section {
    padding: 2vh 4vw;
    gap:2vw;
    display: flex;
    flex: 1;
    justify-content: flex-end;
    align-items: center;
    width:100vw;
}

a, a:visited {
    text-decoration: none;
    color:black;
}

nav {
    z-index: 7;
    position: absolute;
}

.showreel {
    padding: 4vh 24vw;
    text-align:center;
    justify-content: center; 
}

.text-container {
    padding: 0vh 0vw;
}


.cards {
    display:grid;
    gap:30px;
    grid-template-columns: auto auto;
    background-color:white;
    padding:13vw 10vh;
}



/*making titles visible on mobile*/

@media (hover: hover) {
    
.card__overlay:hover > * {
    transform: translateY(0);
}

.card__overlay:hover {
    opacity:1;
}

.card:hover {
    transform: scale(1.05);
    transition: transform 0.25s;
}

.card__overlay > * {
    transform: translateY(20px);
    transition: transform 0.25s;
}

.card__overlay {
    opacity:0;
}

}

/*need to work on responsive sizing*/

/*awful code below
        NVM IT'S NOT AWFUL U GENIUS U FIXED IT */

.card {
    background:  black;
    border-radius: 10px;
    display:block;
    min-height:30rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    transition: all 0.5s ease;
}

.card1 {
    background-image: url('ll1.png');
}

.card2 {
    background-image: url('ll2.png');
}

.card3 {
    background-image: url('ll4.png');
}

.card4 {
    background-image: url('ll5.png');
}

.card5 {
    background-image: url('ll7.png');
}

.card6 {
    background-image: url('ll8.png');
}

.lostnfound {
    background-image: url('final piece.png');
}

.mayadiorama {
    background-image: url('maya1.png');
}

.card__overlay {
    position: relative;
    border-radius: 10px;
    top: 0;
    left:0;
    width:100%;
    height:100%;
    background: white(0,0,0,0.6);
    color:white;
    transition: opacity 0.25s;
    position: relative;
    display: grid;
    justify-items: center;
    align-items: center;
    transition: opacity 200ms ease-in-out;
}


.footer {
    color:darkgrey;
    font-size:0.75rem;
    padding:2rem;
    font-weight: 50;
    padding-top:50px;  
    align-items: center;  
    text-align:center;
}

.label {
padding-right:100px;
}



.container {
    width: 1200px;
    margin: 0px auto;
    columns: 4;
    column-gap: 10px;
}                            

.box {
    width: 235px;
    padding: 20px;
    background: white;
    margin-bottom: 10px;
}

.box img {
    width: 100%;
    height:170px;
    object-fit: contain;
}

h2, h3, a, span {
    font-family: UnboundedBold, sans-serif;
    font-weight:400;
    color:black;
}


  /*stuff for pages besides homepage here*/


.backbutton {
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
    font-size: 16px;
    font-family: Unbounded, sans-serif;
    border-radius: 12px;
    border: 1.5px solid #fff;
    border-radius: 0.75rem;
    padding: 0.75rem 1.25rem;
    transition: all 0.3s ease-in-out;
    background-color: #000;
}

.buttonzone {
text-align:center;
padding-top:7rem;
}

.backbutton:hover {
color: #000;
    background: #fff;
}



/*input.button {
    width: 20rem;
    background-color: white;
    color: black;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family:Unbounded;
    transition:all ease 0.05s;
    }
    
    input.button:hover {
    background-color: grey;
    transition: all ease 0.1s;
    }
    
    
    input:focus{
    outline: none;
    }
    */


#content {
    padding: 10vh 10vw;
    color:black;
}

#intro {
    padding-top: 10%;
    font-size: large;
    font-family: Unbounded;
    color:black;
}

h1 {
    font-family:UnboundedBoldx;
    font-weight:bold;
}

#video {
    padding-top: 10%;
    text-align:center;
    padding-bottom: 15%;
}

/*CONTACT SECTION*/

.parent {
    display:grid;
    box-sizing: border-box;
    grid-template-columns: 1fr 1fr;
    gap:6vw;
    margin: 0px;
    padding-top:5vh;
    line-height: 18pt;
}

.child1 {
    padding-top: 9vh;
    text-align: left;
    color: black;
    box-sizing: border-box;  
    align-items: center;
    padding-left: 1vw;
}

.child2 {
    align-items: center;
    padding-right: 1vw;
}

@media (max-width: 920px) {

    .parent {
        display:block;
        padding-top:1vh;
    }
    .child1 {
        padding-bottom: 3vh;
        padding-left:0px;
        padding-top:2vh;
    }
    .child2 {
        padding-right: 0px;
    }
  }

#softwarelist {
    padding-left:2vw;
    padding-right:2vw;
}

#email_subtitle {
    color:grey;
    font-size:0.8rem;
    padding-bottom:20px;
}

/*footer contact section*/

.footercontact {
    display:flex;
    padding-left:10%;
    padding-right:10%;
    width:96%;
    justify-content:left;
    color:grey;
    padding-top:50px;
}

#footeremail {
    align-content:left;
}

#footersocials {
    align-content:flex-end;
}

.footercontact a {
    color:grey;
}


div.gallery {
    display:grid;
    /*grid-template-columns: 1fr 1fr;*/
    gap:2vw;
    margin: 0px;
    padding-top:5vh;
    border-radius: 10px;
    /*transition: all 0.5s ease;*/
    grid-template-areas:
      'img4 img4 img4 img5 img5 img5'
      'img3 img3 img3 img3 img3 img3'    
      'img1 img1 img1 img7 img7 img7'
      'img6 img6 img6 img6 img6 img6'
      'img2 img2 img2 img8 img8 img8';
      /*'img12 img12 img13 img13 img14 img14';*/
      /*transition: all 0.5s ease;*/
      
  }

.item1 { grid-area: img1; }
.item2 { grid-area: img2; }
.item3 { grid-area: img3; }
.item4 { grid-area: img4; }
.item5 { grid-area: img5; }
.item6 { grid-area: img6; }
.item7 { grid-area: img7; }
.item8 { grid-area: img8; }
/*.item9 { grid-area: img9; }*/
/*.item10 { grid-area: img10; }*/
/*.item11 { grid-area: img11; }
.item12 { grid-area: img12; }
.item13 { grid-area: img13; }
.item14 { grid-area: img14; }*/

/*
.gallery__overlay {
    position: relative;
    top: 0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.6);
    color:white;
    transition: opacity 0.25s;
    position: relative;
    display: grid;
    justify-items: center;
    align-items: center;
    transition: opacity 200ms ease-in-out;
}

.gallery__overlay:hover > * {
    transform: translateY(0);
}

.gallery__overlay:hover {
    opacity:1;
}


div.gallery:hover {
    position: relative;
    border-radius: 10px;
    top: 0;
    left:0;
    width:100%;
    height:100%;
    background: white(0,0,0,0.6);
    color:white;
    transition: opacity 0.25s;
    position: relative;
    display: grid;
    justify-items: center;
    align-items: center;
    transition: opacity 200ms ease-in-out;
  }
  */

  div.gallery img {
    width: 100%;
    height: auto;
  }

.grid-container {
    display: grid;
    background-color: #2196F3;
    padding: 10px;
}


/*.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
  }
  
div.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* or "contain" */

.nav-section img {
        max-height:3rem;
}

@media (max-width: 650px) {
   
    div.gallery {
        display:grid;
        /*grid-template-columns: 1fr 1fr;*/
        gap:2vw;
        margin: 0px;
        padding-top:5vh;
        border-radius: 10px;
        /*transition: all 0.5s ease;*/
        grid-template-areas:
          'img4'    
          'img5'
          'img3'
          'img1'
          'img7'
          'img6'
          'img2'
          'img9';
          /* 
          'img10'
          'img7';img10 img11 img11'
          'img12 img12 img13 img13 img14 img14';*/
          /*transition: all 0.5s ease;*/
          
      }

      nav > .nav-section {
        display: flex;
        gap: 0;
        box-sizing: border-box;
        align-items: flex-end;
        justify-content: flex-end;
    }
    
    #nav-logo-section {
        padding-top: 3vh;
        padding-right: 5vw;
        padding-bottom: 3vh;
        padding-left: 3vw;
        justify-content: flex-start; 
    }

    .nav-section img {
        max-height:2rem;
    }
    
    #nav-links-section {
        padding: 3vh 4vw;
        gap:3vw;
        display: flex;
        flex: 1;
        justify-content: flex-end;
        align-items: center;
        width:100vw;
        font-size: 0.8rem;
        
    }

    .text-container {
        padding: 5vh 5vw;
        padding-top: 100px;
    }

}

@media only screen and (max-width: 650px) {
    .hide-me { display: none; }

}