*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: 400;
    font-family: sans-serif;
    color: white;
    
}
    
@font-face {
    font-family: 'WildWorld';
    src: url('/WILDWORLD.otf') format('opentype');
}    
    
@font-face {
    font-family: 'Subjectivity-RegularSlanted';
    src: url('/fonts/Subjectivity-RegularSlanted.otf') format('opentype');
}


html, body{
        
        background-color: white;
        height: 700vh;
        font-family: "WildWorld", sans-serif;
        
    
 }
    
section{
    
        position: relative;
        height: 200vh;
        width: 100%;
        display: flex;
    
} 



section:nth-child(2){
top: -100vh;

}

section:nth-child(3){
    top: -200vh;
    
}

section:nth-child(4){
    top: -300vh;
    
}

section:nth-child(5){
    top: -400vh;
    
}

section:nth-child(6){
    top: -500vh;
    
}

section:nth-child(7){
    top: -600vh;
    
}

section:nth-child(8){
    top: -700vh;
    height: 100vh;
}



.sticky{

    position: sticky;
    position: -webkit-sticky;
    width:  100%;
    height: 100vh;
    top: 0;
    padding: 1rem;
    will-change: filter, transfrom;
}

.container{

    width: 100%;
    height: 100%;
    background-color: black;
    border-radius: 15px;
    padding: 1.5rem;
    overflow: scroll;
    
}


.grid-container{
    
    height: 90%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;


}





.running {
    
    position: relative;
    margin: auto;
    top: 1vh;
    left: 0;
    width: 100%;
    font-size: 2vw;
    line-height: 2;
    overflow: hidden;
    z-index:1 ;
    
   

  }

  @keyframes moveLeft {
   0%{transform: translateX(0);
   }
   100%{transform: translateX(-3000vw);
   };
   }


 .running span {
  animation: moveLeft 500s infinite;
  white-space: nowrap;
  display: block;
  position: relative;
  margin-top: 1rem;

 } 


 @keyframes fadeIn {
 
    0% {
     opacity: 0;
     transform: trasnlateY(20px);
     
    }
    50%{
   
    transform: translate(0);
   
   }
   100%{
   opacity: 1;
   }
   }



   @keyframes scroll{

   0% {
       bottom: 20%;
       opacity: 0;


   }
    100%{
        bottom: 80%;
        opacity: 1;

    }

   }





   .appear{
   
   opacity: 0;  
   animation-name: fadeIn;
   animation-duration: 2s;
   animation-delay: 1s;
   animation-fill-mode: forwards;
  
   
   }

   .appear p{
    

    font-family: Subjectivity-RegularSlanted;
    font-size: 20px;
    text-align: center;
   
}

.outer-box{
    
    
    
    padding: 2rem;
    gap: 1rem;
    display: grid;
    
    font-size: 3.5vmin;
    grid-template-rows: 1fr;
    justify-items: center
  

  }



  .mouse-box{
   
    
    
    
    position: relative;
    

  }



  .mouse-scroll{
    
    
    
    position: relative;
    height: 4.5em;
    border: solid 3px white;
    border-radius: 30px;
    width: 2.1em;
    
}

.mouse-scroll::before {

    content: '';
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    background: white;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll 2.5s infinite;

  }

 


   p{
     font-family: sans-serif;
     font-size: medium;
     text-align: left;
     
         
   }
   
   h1{
    
  
    font-family: WildWorld;
    font-size: 3vmin;
    

   }


   h2{
    
    text-align: left;
    font-size: medium;
    font-family: sans-serif;
    font-size: 3vmin;
    
   }



  
   .mainText{
    
    
    align-items: left;
    grid-column-start: 2;
    grid-row-start: 1;
    
    
    
    
     

   }


   .introductinparagraph p{

    font-size: medium;
    font-size: 2.8vmin;
    font-family:  sans-serif;
    text-align: left;
    
   

   }


   .taskList{

    grid-row-start: 2;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 3;

    
    padding-right: 3rem;
    padding: 1rem;

   }

   


   h3{
    
    
    font-family: WildWorld;
    font-size: 3vmin;
    line-height: 140%;

   }

   h4{
    
  
   font-weight: 600;
   font-family: WildWorld;
   font-size: 3vmin;

    
  

   }

  

   li{
    
    
    
    font-family: sans-serif;
    font-size: 3vmin;

   }
   
   h5{
    font-size: large;
    font-family: WildWorld;
    font-weight: 700;
    font-size: 3.5vh;
   
     
   }
  
  p{
    
    font-family:sans-serif;
    font-size: 2.5vmin;
    line-height: 140%;
    
  
  }



.columns{

    
    gap: 1rem;
    display: grid;
    grid-template-columns: 30% 68%;
    grid-template-rows: 1fr 2fr;
    height: inherit;
    width: 100%;
    
    
 

}



.columns-education{

    gap: 2rem;
    padding: 2rem;
    display: grid;
    text-align: center;
    grid-template-rows: 1fr 1fr 1fr;
    height: 80%;
    font-size: 3.5vmin;
    
   



}


.taskList-projects{
    
    padding: 1.5rem;
    padding-top: 3rem;    
    display: grid;
    gap: 2rem;
    text-align: left;
    grid-template-rows: 1fr;
    height: 90%;
    


}


.columns-skills{

    padding: 2rem;
    gap: 1rem;
    display: grid;
    text-align: center;
    font-size: 3.5vmin;
    grid-template-rows: 1fr;
    



}

.tasks-projects{

padding: 1rem;

}





.info{
    
    
    grid-column-start: 1;
    grid-row-start: 1;
    grid-row-end: 1;
    text-align: left;
    

}