/*General Styling */

html{
    scroll-behavior: smooth;
}

body{
    font-family:  'Open sans', Verdana, Georgia, 'Times New Roman', Times, serif;
    margin:0;
    text-align: center;
    background-color: rgb(247, 255, 255);
    font-weight: 1;
    overflow-y: hidden;
    height:100vh;
    width: 100vw;
}
section{
    height:100%;
    width:100%;
    position: relative; 
}

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


/* Navbar Styling */
.invisible{
    visibility: hidden !important;
}
.dark-navbar{
    background-color:rgb(53, 53, 187);
    color: rgba(246, 246, 248, 0.884);
}

.dark-arrow{
    background-color: #010101 !important;
}

nav{
    display: flex;
    position: fixed;
    left:0;
    top:0;
    flex-direction:column;
    background-color: rgb(100, 97, 255);
    width:20vw;
    height:100%;
    z-index: 2;
    padding-top: 5em;
    transform: translateX(-100%);
    transition: 1s cubic-bezier(0.23, 1, 0.320, 1);
    color:rgb(0, 0, 0);

}

.active-navbar{
    transform: translateX(0);
}

.nav_content{
    padding: 1%;
    font-size: 1.65em;
    margin:1%;
    border-style: solid;
    border-color: #010101   ;
    border-width: 0px 0px 0.1px 0px;    
    text-decoration-line: none;
    font-weight: 600;
    color: inherit;
}

#nav_activator{
    position: fixed;
    top:10;
    left:0;
    width: 10vh;
    z-index:3;
}

.span{
    height: 0.4vh;
    margin:15%;
    background-color: #eee;
    border-radius: 0.1vh;
    transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.line-1{
    transform: rotate(45deg) translateY(2.5vh);
}
.line-2{
    transform: scale(0);
}
.line-3{
    transform: rotate(-45deg) translateY(-2.5vh);
}


/*Style for the first section*/

#Header{
    height:100%;
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    text-align:center;
    background: #161515;
    height:100%;
    cursor: url('src/down-arrow.png');
}

h1{
    font-family: Pangolin;
    color: #637cc7;
    text-align: center;
    font-size: 4em;
    margin: 1%;
    margin-top: 0;
    margin-left:auto;
    margin-right: auto;
    width:50%;
    border-radius: 2em;
    padding: 1%;
    text-decoration-line: underline ;
}

h3{
    font-size: 1.85em;
}

#I_am_anim_holder{
    color:#eb9534;
    justify-content:center;
}

.I_am_anim{
    margin:0;
    text-align: left;    
    display: inline;
}

.arrow{
    width:4em;
    height:4.5em;
    position: absolute;
    top:85%;
    left:50%;
    margin-left: -2em;
}

.up{
    transform: rotate(180deg) translateY(80%);
}

/*Styling of 2nd Section */
#my_pic{
    float:right;
    height:50vmin;
    width:50vmin;
    border-radius: 10%;
    margin: 0 5%;
}

.about_me_div{
    text-align: left;
    width:75%;
    border-radius: 1em;
    margin: auto;
    padding: 2%;
    font-family: 'pangolin';
    font-size: 1.75em;
    text-align: left;
}   

/*Styling of 3rd Section */
#projects_container{
    display: flex;
    width: 100%;    
    overflow-y: hidden;
}

::-webkit-scrollbar
{ width: 0px; }


.project_tile{
    flex-shrink: 0;
    background-color: rgb(255, 255, 255);
    padding: 0%;
    margin: 2% 5% 2% 5%;
    border-radius: 2.5vmin 2.5vmin 2.5vmin 2.5vmin;
    width: 20vw;
    height: 60vh;
    cursor:hand;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1), -2px -2px 10px rgba(0,0,0,0.1);
    transition:2s cubic-bezier(0.075, 0.82, 0.165, 1);
    font-family: 'Pangolin';
}

.project_tile:hover{
    transform: scale(110%);
}

.project_thumbnail{
    width:100%;
    height: 40%;
    border-radius: 2.5vmin 2.5vmin 0 0;
    margin-bottom: 10%;
}

.project_info{
    font-weight: 600;
    font-size: 1.2em;
    height:50%;
}

.redirect{
    height:32px;
    transform: translateY(-100%);
}


/*Styling of 4th Section */

#Contact{
    background: #161515;
}

#contact_me_text{
    position: absolute;
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
    font-family: 'pangolin';
    font-size: 7vmin;
    background-color: #ff4800;
    font-weight: 250;
    text-align: center;
    line-height: 35vmin;
    height:35vmin;
    width:35vmin;
    border-radius: 20vmin;
}

@keyframes revolve-1{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }  
}
@keyframes revolve-2{
    0%{
        transform: rotate(120deg);
    }
    100%{
        transform: rotate(480deg);
    }  
}
@keyframes revolve-3{
    0%{
        transform: rotate(240deg);
    }
    100%{
        transform: rotate(600deg);
    }  
}
@keyframes revolve-acw-1 {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(-360deg);
    }  
}
@keyframes revolve-acw-2 {
    0%{
        transform: rotate(-120deg);
    }
    100%{
        transform: rotate(-480deg);
    }  
}
@keyframes revolve-acw-3 {
    0%{
        transform: rotate(-240deg);
    }
    100%{
        transform: rotate(-600deg);
    }  
}
.social-container{
    height:75vmin;
    width:fit-content;
    position: absolute;
    left: calc(50vw - 12.5vmin/2);
    top: calc(100vh/2 - 75vmin/2);
}
.icon-1-container{
    animation: revolve-1 10s cubic-bezier(0,0,1,1) 0s infinite;
    transform: rotate(0deg);
}
.icon-2-container{
    animation: revolve-2 10s cubic-bezier(0,0,1,1) 0s infinite;
    transform: rotate(120deg);
}
.icon-3-container{
    animation: revolve-3 10s cubic-bezier(0,0,1,1) 0s infinite;
    transform: rotate(240deg);

}

.social-icons:hover .social-container, .social-icon:hover{
    animation-play-state: paused;
}
.socials{
    background-color: white;
    border-radius: 100%;
    width:fit-content;
}

.social-icons{
    height:12.5vmin;
    border-radius: 100%;
    animation:revolve-acw;
    animation-duration: 10s;
    animation-timing-function: cubic-bezier(0,0,1,1);
    animation-iteration-count: infinite;
}
.icon-1{
    transform: rotate(0deg);
    animation: revolve-acw-1 10s cubic-bezier(0,0,1,1) 0s infinite;
}
.icon-2{
    transform: rotate(240deg);
    animation: revolve-acw-2 10s cubic-bezier(0,0,1,1) 0s infinite;
}
.icon-3{
    transform: rotate(120deg);
    animation: revolve-acw-3 10s cubic-bezier(0,0,1,1) 0s infinite;
}

@media (hover: none){
    .project_tile:hover{
        transform: none;
    }
    .social-container, .social-icons{
        animation: none;
    }
}

@media (max-width:1000px) {
    h3{
        font-size: 1.8em;
    }
    nav{
        width:fit-content;
    }
    .about_me_div{
        font-size: 1.3em;   
    }
    #my_pic{
        width:35vmin;
        height:35vmin;
    }
    .project_tile{
        width:40vw;
    }
}


@media (max-width:520px) {
    nav{
        width:100vw;
    }
    .project_tile{
        width:80vw;
    }
}

@media (max-width:400px){
    h1{
        font-size: 3em;
    }
    h3{
        font: size 1.6em;
    }
    #contact_me_text{
        height:40vmin;
        width:40vmin;
        line-height: 40vmin;
    }
    .social-icons{
        height:20vmin;
    }
    .social-container{
        height: 85vmin;
        left: calc(50vw - 20vmin/2);
        top: calc(50vh - 85vmin/2);
    }
}