/*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:#B80D3D;
    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: #eb9534;
    width:25vw;
    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);
    /* box-shadow: 10px 10px #000, */
    box-shadow: rgba(0, 0, 0, 0.70) 1.95px 1.95px 10px;

}

.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:25;
    left:25;
    width: 7.5vh;
    height: 7.5vh;
    z-index:3;
}

.span{
    height: 0.25vh;
    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(1.875vh);
}
.line-2{
    transform: scale(0);
}
.line-3{
    transform: rotate(-45deg) translateY(-1.875vh);
}

.anchor{
    height: 10px;
    width: 10px;
    visibility: hidden;
}

/*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: #1B998B;
    /* color: #637cc7; */
    text-align: center;
    font-size: 4em;
    margin: 1%;
    margin-top:2%;
    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: 50%;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3), -2px -2px 4px rgba(0,0,0,0.3);
    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% 3% 2% 3%;
    border-radius: 0.5vmin;
    width: 25vw;
    height: 55vh;
    cursor:hand;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.4);
    border: 0.1px solid rgba(0,0,0,0);
    transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    font-family: 'Pangolin';
}

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

.project_thumbnail{
    /* width:100%; */
    height: 40%;
    margin: 5% 0;
}

.project_title{
    font-weight: 600;
    font-size: 1.5em;
    height:10%;
}

.project_info{
    font-weight: 200;
    color: #555;
    font-size: 1em;
    height:50%;
    text-align: justify;
    margin: 0 5%;
    font-family: 'Open sans', Verdana, Georgia, 'Times New Roman', Times, serif;
}

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


/*Styling of 4th Section */

#Contact{
    background: #161515;
}

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

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

#contact_links{
    position: relative;
    float:right;
    height:50vmin;
    width:50vmin;
    border-radius: 10%;
    margin: 0 5%;
}

.contact-embedded-link{
    color: #eb9534;
    font-weight: 600;
}

@keyframes revolve-1{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }  
}
@keyframes revolve-2{
    0%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(540deg);
    }  
}

@keyframes revolve-acw-1 {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(-360deg);
    }  
}
@keyframes revolve-acw-2 {
    0%{
        transform: rotate(-180deg);
    }
    100%{
        transform: rotate(-540deg);
    }  
}

.social-container{
    height:50vmin;
    width:fit-content;
    position: absolute;
    left: calc(25vmin - 7.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(180deg);
}

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

.social-icons{
    height:7.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(180deg);
    animation: revolve-acw-2 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;
    }
    .contact_me_div{
        font-size: 1.3em;   
    }
}


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

@media (max-width:400px){
    h1{
        font-size: 3em;
    }
    h3{
        font: size 1.6em;
    }
    #contact_me_text{
        left: 0%;
        height:100%;
        width:100%;
        border-radius: 50%;
        line-height: 100%;
    }
    .social-icons{
        height:10vmin;
    }
    .social-container{
        height: 10vmin;
        left: calc(25vmin - 7.5vmin/2);
    }
}