html{
    scroll-behavior: smooth;
}

section{
    height:100vh;
    scroll-snap-align: center;
}

#scroll-container{
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}


#topnav {
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    border: 2px solid black;
    border-radius: 40px;
    width:33vw;
    margin-left: 33.5vw;
    position:fixed;
    z-index:1;
  }
  
#topnav a {
    float:left;
    color: #f2f2f2;
    text-align: center;
    padding: 1.0vw;
    text-decoration: none;
    font-size: 1vw;
    color: red;
    font-family: 'Fredoka One';
    text-align: center;
}
  
#topnav a:hover {
    background-color: red;
    color:white;
}
  
#topnav a.active {
    background-color: #04AA6D;
    color: white;
}



#home{
    padding:50px;
}

#intro{
    font-family: 'Fredoka One';
    font-size: 60px;
    animation-name: fade;
    animation-duration: 4s;
    width:550px;
    text-align: right;
    width: 800px;
}

@keyframes fade{
    0%{ opacity: 0;}
    100%{ opacity: 1;}
}


#description{
    display: flex;
    width:fit-content;
}

#myphoto{
    width: 570px;
    text-align: right;
    animation-name: img-fade;
    animation-duration: 4s;
}

@keyframes img-fade{
    0%{opacity: 0}
    100%{opacity: 1}
}

#home{
    background: url('bg.svg');
    background-repeat: no-repeat;
    background-size: 1500px;
}


.time-tag{
    display: flex;
}

.year{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 40px;
    background: red;
    color: white;
    padding:10px;
    width:250px;
    text-align: center;
}

.school{
    font-family: 'Fredoka One';
    padding: 10px;
    font-size: 25px;
    background-color:white;
}

.time-tag{
    border: 1px solid black;
    width: 550px;
}

#timeline{
    padding:50px;
}

#timeline-wrapper{
    display:flex;
}

#timeline-img{
    width: 800px;
    text-align: right;
}

.arrow{
    width: 100px;
}

#achievement-img{
    width:500px;
}

#achievement-img-wrapper{
    width:500px;
    position: relative;
    left:480px;
    top:250px;
}

.achieve{
    font-family: 'Fredoka One';
    font-size: 30px;
    text-align: center;
}

.achieve:hover{
    color:red;
}

#essay-writing{
    box-shadow: 5px 5px 5px gray;
    padding:10px;
    width:300px;
    position: relative;
    top:-200px;
    left:100px;
}

#essay-writing:hover{
    animation-name: essay-animation;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes essay-animation{
    100%{transform: translateX(-5px) translateY(-5px);
    box-shadow: 10px 10px 15px 5px gray;}
}

#kvpy{
    box-shadow: 5px -5px 5px gray;
    padding:10px;
    width:300px;
    position: relative;
    top:100px;
    left:100px;
}

#kvpy:hover{
    animation-name: kvpy-animation;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes kvpy-animation{
    100%{transform: translateX(-5px) translateY(5px);
    box-shadow: 10px -10px 15px 5px gray;}
}

#rmo{
    box-shadow: -5px 5px 5px gray;
    padding:10px;
    width:300px;
    position: relative;
    top:-400px;
    left:1035px;
}

#rmo:hover{
    animation-name: rmo-animation;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    
}

@keyframes rmo-animation{
    100%{transform: translateX(5px) translateY(-5px);
         box-shadow: -10px 10px 15px 5px gray;}
}


#jee{
    box-shadow: -5px -5px 5px gray;
    padding:10px;
    width:300px;
    position: relative;
    top:-90px;
    left:1035px;
}

#jee:hover{
    animation-name: jee-animation;
    animation-duration: 1s;
    animation-fill-mode: forwards;   
}

@keyframes jee-animation{
    100%{transform: translateX(5px) translateY(5px);
    box-shadow: -10px -10px 15px 5px gray;}
}

#interest-img{
    width: 500px;
}

#interest-img-wrapper{
    width: 500px;
    position:relative;
    left:500px;
    top: 80px;
    z-index:-1;
}

#cv{
    font-family: 'Fredoka One';
    font-size: 30px;
    border: 1px solid black;
    width:230px;
    height:200px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border-radius: 50%;
    top:-300px;
    left:100px;
    box-shadow: 0px 0px 10px gray;
}


#wd{
    font-family: 'Fredoka One';
    font-size: 30px;
    border: 1px solid black;
    width:230px;
    height:230px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border-radius: 50%;
    top:0px;
    left:100px;
    box-shadow: 0px 0px 10px gray;
}

.interests:hover{
    animation-name: interest-anim;
    animation-duration:1s;
    animation-fill-mode: forwards;
}

@keyframes interest-anim{
    100%{
        transform: scale(1.1);
    box-shadow: 0px 0px 25px 10px gray;
    }
}

#cp{
    font-family: 'Fredoka One';
    font-size: 30px;
    border: 1px solid black;
    width:230px;
    height:230px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border-radius: 50%;
    top:-300px;
    left:600px;
    box-shadow: 0px 0px 10px gray;
}

#fin{
    font-family: 'Fredoka One';
    font-size: 30px;
    border: 1px solid black;
    width:230px;
    height:230px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border-radius: 50%;
    top:00px;
    left:200px;
    box-shadow: 0px 0px 10px gray;
}

.contact{
    border-radius: 50%;
    height:100px;
    margin:25px;
}

a{
    text-decoration: none;
}

#contact-img{
    position: relative;
    z-index:-5;
    top:50px;
    left:450px;
}

.contact:hover{
    animation-name: contact-animation;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes contact-animation{
    100%{ transform: scale(1.3) rotate(360deg);
          box-shadow: 0px 0px 30px gray;}
}


#links{
    position:relative;
    left:350px;
}