@font-face {
    font-family: "repro";
    src: url(fonts/ABCReproVariable-Trial.woff);
  }
  
  @keyframes typing {
      from { width: 100% }
      to { width: 0 }
      
  }

  @keyframes sections{
    0%{
        opacity: 100%;
    }

    90%{
        opacity:99%
    }

    100%{
        opacity: 0%;
    }
  }

  
  body{
    max-height:100vh;
    font-size:2vw;
    font-family: "repro";
  }
  .section1 {
    position: relative;
    display:flex;
    justify-content: center;
    align-items:center;
    margin-top:37vh;
    animation: sections 18s linear;
    opacity: 0%;
  }
  
  .typing {
    position: absolute;
    top: 0;
    margin: 0;
    z-index: -1;
    text-align:center;
  }
  
  .hiders {
    margin: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
  
  
  .hiders p {
    position: relative; 
    clear: both; 
    margin: 0;
    float: right; 
    width:0;
    background: white; 
    animation: typing 4s steps(70, end);
    animation-fill-mode: both; 
  }
    
  .hiders p:nth-child(2) {
    animation-delay: 2s;
  }

  .hiders p:nth-child(3) {
    animation-delay: 2s;
  }

  .hiders p:nth-child(4) {
    animation-delay: 4s;
  }

  .hiders p:nth-child(5) {
    animation-delay: 6s;
  }

  .hiders p:nth-child(6) {
    animation-delay: 8s;
  }

  .hiders p:nth-child(7) {
    animation-delay: 10s;
  }

  .hiders p:nth-child(8) {
    animation-delay: 12s;
  }
  
  @media (max-width: 768px){
    body{
      font-size:2vh;
    }


      .navigation{
        font-size:1vh;
      }
    
      #heading{
        flex-direction:column;
        line-height:0px;
      }
    
      .header1{
        font-size:4vw;
      }
    
      .header2{
        font-size:35px;
      }
    }
    

  @keyframes navOpacity{
    0%{
        opacity: 0%;
    }
    90%{
        opacity: 0%;
    }
    100%{
        opacity: 100%;
    }
  }

  .navigation{
    position: absolute;
    font-family: "repro";
    font-size:1vw;
    font-variation-settings: "wght" 300;
    color:black;
    text-align:center;
    line-height:3vh;
    max-width: fit-content;
    max-height:fit-content;
    animation: navOpacity 20s;
    opacity: 100%;
  }

  section {
    position:absolute;
    top:0;
    left:0;
    display:  flex;
    flex-direction:  column;
    justify-content: center;
    align-items:  center;
    height:  100vh;
    width: 100vw;
}

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

a:hover{
    font-variation-settings: "wght" 500;
    text-decoration: underline red 3px;
  }

  #heading{
    display:flex;
    position:fixed;
    top:2%;
    gap:0.5%;
    width:100%;
    justify-content:center;
    align-items:center;
    color:red;
    animation: navOpacity 20s;
}
  
.header1{
    font-variation-settings: "wght" 200;
    font-size:3vw;
}
  
.header2{
    font-size:45px;
    animation: varying 5s infinite;
}
  
@keyframes varying{
    0%{
      font-variation-settings: "wght" 200;
    }
  
    50%{
      font-variation-settings: "wght" 500;
    }
  
    100%{
      font-variation-settings: "wght" 200;
    }
}