html{
    scroll-behavior: smooth;
}

body{
    margin: 0px;
    margin-top: -1em;
    /* Relative position creates extra space. The negative margin is to remove that */

}




.background{
    position: relative;
    z-index: -1;
}

.background img{
    position:absolute;
    top:0%;
    left:0%;
}

nav{
    height:10vh;
    background-color:rgba(255,255,255,0.2);
    /* background-color:rgba(0,0,0,0.1); */
}
.nav-links{
    height:100%;
    width:50%;
    list-style: none;
    display:flex;
    justify-content: space-around;
    align-items: center;
    margin-left:auto;
}

.nav-links a{
    color:white;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}


.nav-links a::after {
    display: block;
    content: attr(data-tooltip);
    font-weight: bold;
    height: 1px;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
    
  }


.nav-links a:hover{
    font-weight: 500;
}





.hamburger{
    background: rgb(157,49,171);
    background: linear-gradient(45deg, rgba(157,49,171,1) 0%, rgba(202,149,235,1) 60%, rgba(180,125,224,1) 100%); 
    position: fixed;
    top: 40px;
    right:40px;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 6;
    opacity: 0;
    pointer-events: none;
    /* transition: all 100ms ease-out;  */
}

.line{
    width:25px;
    height:3px;
    background-color: white;
    margin:3px;
}

.floating-navbar{
    height: 60vh;
    width: 320px;
    background: rgb(181,91,252);
    background: linear-gradient(45deg, rgba(181,91,252,1) 0%, rgba(231,162,236,1) 60%, rgba(229,127,242,1) 100%); 
    position: fixed ;
    top: 40px;
    right: 40px;
    border-radius: 30px;
    clip-path: circle(0px at right 30px top 30px);
    -webkit-clip-path: circle(0px at right 30px top 30px);
    transition: all 1s ease-out;
    /* transition-property: clip-path not working properly */
    /* this can cause problems if clip-path is not supported
     because it will be visible even without clicking the hamburger
     Check!!!! and change!!!*/
    z-index: 5;
    pointer-events: none;
}

.floating-navbar.open{
    clip-path: circle(1000px at right 30px top 30px);
    -webkit-clip-path: circle(1000px at right 30px top 30px);
    /* z-index: 5;
    opacity: 1.0; */
    pointer-events: all;
}


.floating-nav-links{
    list-style: none;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;   
    align-items: center;
    
    
}

.floating-nav-links a{
    color: white;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}
.floating-nav-links a::after {
    display: block;
    content: attr(data-tooltip);
    font-weight: bold;
    height: 1px;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
    
  }


.floating-nav-links a:hover{
    font-weight: 500;
}






.intro-box{
    height:100vh;
    position: relative;
}

.introduction{
    width:100%;
    position:absolute;
    top:15vw;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* transform: translateY(0%);
    opacity: 1.0;
    transition: all 3s ease; */
    animation: slideInOnLoad 1.5s ease 1 0s;
    /* Change this!! */
}

/* .introduction.beforeLoad{
    transform: translateY(-10%);
    opacity: 0.0;
} */

@keyframes slideInOnLoad{
    0% {
        transform: translateY(20%);
        opacity: 0.0;
    }
    100%{
        transform: translateY(0);
        opacity: 1.0;
    }
}

h1{
    color:white;
    font-size: 3.5em;
    font-family: 'Raleway';
    margin-top: 0px;
    margin-bottom: 8vh;
}
.introduction p{
    margin-top: 0px;
    margin-bottom: 2vh;
    color: white;
    font-family: 'Montserrat';
    font-weight: 300;
}

.introduction p:nth-of-type(3){
    margin-bottom: 0px;
}

#about{
    height:50vh;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#about p{ 
    width:50vw;
    font-family: 'Montserrat';
    font-weight: 500;
    text-align: center;
}










#skills{
    padding:3em;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
h2{
    font-family: 'Raleway', sans-serif;
    font-size: 2.5em;
    text-align: center;
}
#skills h3{
    font-size: 1.7em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    /* display:flex;
    justify-content: center; */
    text-align: center;

}
.dev-row, .webdev, .appdev {
    padding:2em;
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    width:50vw;
    align-content: space-around;
}

.devicon{
    height:5rem;
}

.dev-cell, .glass p, .contest{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dev-cell div:nth-of-type(2){
    color:gray;
    font-family: 'Montserrat';
    font-weight: 500;
}


#skills{
    position: relative;
}

.circle4{
    background-image: linear-gradient(to bottom right, rgba( 111, 3, 196  , 0.06),rgba( 111, 3, 196  , 0.6));
    height:8rem;
    width:8rem;
    border-radius: 50%;
    position:absolute;
    bottom:45%;
    right:8%;
}
.circle5{
    background-image: linear-gradient(to bottom right, rgba( 160, 9, 231  , 0.06),rgba( 160, 9, 231  , 0.6));
    height:5rem;
    width:5rem;
    border-radius: 50%;
    position:absolute;
    bottom:40%;
    right:15%;
}
.circle6{
    background-image: linear-gradient(to bottom right, rgba( 160, 9, 231  , 0.06),rgba( 160, 9, 231  , 0.6));
    height:3rem;
    width:3rem;
    border-radius: 50%;
    position:absolute;
   bottom:60%;
    right:15%;
}

#skills img{
    width:25vw;
    position:absolute;
    bottom:40%;
    left:0%;
    opacity: 50%;
}










.glass{
    
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width:50vw;
    min-height: 100vh;
    background-image:linear-gradient(to bottom right, rgba(127, 53, 151, 0.02),rgba(204, 44, 255,0.2));
    border-radius: 1.5em;
    margin: 10vh 0px 10vh 45px;
    padding: 20px;
    backdrop-filter: blur(1rem);
    /* backdrop-filter not working :'( */
}



.glass p{
    margin:0px;
}

.glass h3{
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;

}

.contest div{
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

.contest{
    text-align: center;
}


.achievements{
    position: relative;
    display: flex;
}
.circle1{
    background-image: linear-gradient(to bottom right, rgba(122, 35, 149 , 0.06),rgba(122, 35, 149 , 0.6));
    height:10rem;
    width:10rem;
    border-radius: 50%;
    position:absolute;
    /* top: -15%;
    left:7%; */
    top:-5%;
    left:7%
}

.circle2{
    background-image: linear-gradient(to bottom right, rgba( 160, 9, 231  , 0.06),rgba( 160, 9, 231  , 0.6));
    height:3rem;
    width:3rem;
    border-radius: 50%;
    position:absolute;
    /* top: -20%;
    left:17%; */
    top:-9%;
    left:17%;
}

.circle3{
    background-image: linear-gradient(to bottom right, rgba( 160, 9, 231  , 0.06),rgba( 160, 9, 231  , 0.6));
    height:8rem;
    width:8rem;
    border-radius: 50%;
    position:absolute;
    /* bottom:-15%;
    left:45%; */
    bottom:-5%;
    left:45%;
}

.coding-profile{
    min-height:100vh;
    flex-grow:1;
    margin-top: 10vh;
    margin-bottom: 10vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.menu{
    height:15vw;
    width:15vw;
    border-radius: 50%;
    /* background: rgb(255,155,130);
    background: radial-gradient(circle, rgba(255,155,130,1) 0%, rgba(252,70,141,1) 100%);  */
    
    background: rgb(169,12,171);
    background: linear-gradient(45deg, rgba(169,12,171,1) 0%, rgba(255,100,246,1) 25%, rgba(255,178,251,1) 50%, rgba(255,100,246,1) 75%, rgba(169,12,171,1) 100%); 

    /* background: rgb(169,12,171);
    background: linear-gradient(45deg, rgba(169,12,171,1) 0%, rgba(255,53,244,1) 40%, rgba(236,211,237,1) 50%, rgba(255,53,244,1) 60%, rgba(169,12,171,1) 100%); */
    background-size:300%;
    /* animation: shine 1.5s; */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position:relative;
}

.menu:hover{
    animation: shine 3.5s infinite;
    
}

@keyframes shine{
    0%{
        background-position: right;
    }
    40%{
        background-position: left;
    }
    100%{
        background-position: left;
    }
}

#click-me{
    color: gray;
    font-size: 12px;
    position:absolute;
    bottom: 20vw;
    text-align: center;
    font-family: 'Montserrat',sans-serif;
    font-weight: 300;
    pointer-events: none;
    cursor: default;
}

#menu-title{
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 32px;
    text-align: center;
}


#handle1, #handle2{
    height:10vw;
    width: 10vw;
    border-radius: 50%;
    background: rgb(255,155,130);
    background: radial-gradient(circle, rgba(255,155,130,1) 0%, rgba(252,70,141,1) 100%);
    background-size: 300%;
    position: absolute;
    display: none;
    z-index: -1;
    
}

#handle3, #handle4{
    height:8vw;
    width: 8vw;
    border-radius: 50%;
    background: rgb(73,255,219);
    background: radial-gradient(circle, rgba(73,255,219,1) 0%, rgba(110,126,244,1) 100%);  
    background-size: 300%;
    position: absolute;
    display: none;
    z-index: -2;
}

#handle1,#handle2,#handle3,#handle4{
    animation: shine2 3.5s infinite;
    
}

@keyframes shine2{
    0%{
        background-position: right;
    }
    40%{
        background-position: left;
    }
    100%{
        background-position: left;
    }
}

.handle p{
    text-align: center;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    margin: 0;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    color: white;
}

#handle1 p, #handle2 p{
    line-height: 10vw;
}

#handle3 p, #handle4 p{
    line-height: 8vw;
}









.project-box{
    padding: 45px;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
}

.project-card{
    width: 70vw;
    height: 70vh;
    display: flex;
    border-radius: 1em;
    margin-top: 25px;
    margin-bottom: 25px;
    box-shadow: 0 0 100px 0 rgba( 212, 175, 214 ,0.25);
    /* transform: rotateY(20deg); */
    transform: perspective(3000px);
    transition: transform 600ms ease;
}

.project-card:nth-of-type(2n+1){
    flex-direction: row;
}
.project-card:nth-of-type(2n)
{
    flex-direction: row-reverse;
}

.project-description, .project-image{
    width:50%;
    height:100%;
    overflow:hidden;
}

.project-description{
    box-sizing: border-box;
    padding:3em;
}

.project-description h3{
    font-size: 1.7em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    margin: 0;
    line-height: 2em;
}

.project-description p{
    color:gray;
    font-family: 'Montserrat',sans-serif;
    font-weight: 500;
    line-height: 2em;
    margin-top: 40px;
    margin-bottom: 40px;
}

.project-card:nth-of-type(2n+1) .project-image{
    background-image: linear-gradient(to right, #4568dc, #b06ab3);
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
}


.project-card:nth-of-type(2n) .project-image{
    background: linear-gradient(to right, #ff5f6d, #ffc371);
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
}

.project-card:nth-of-type(2n+1):hover{
    transform: perspective(3000px) rotateY(-8deg);
    transition: transform 600ms ease;
}

.project-card:nth-of-type(2n):hover{
    transform: perspective(3000px) rotateY(8deg);
    transition: transform 600ms ease;
}

#projectImage1{
    background: rgb(0,0,34);
    background: linear-gradient(45deg, rgba(0,0,34,1) 0%, rgba(31,31,62,1) 50%, rgba(20,20,39,1) 100%); 

}

#projectImage1 img, #projectImage2 img, #projectImage3 img{
    width:100%;
}

#projectImage2{
    background: rgb(0,28,69);
    background: linear-gradient(45deg, rgba(0,28,69,1) 0%, rgba(0,84,144,1) 30%, rgba(3,114,144,1) 51%, rgba(0,84,144,1) 67%, rgba(0,50,90,1) 88%, rgba(0,50,90,1) 100%); 

}

#projectImage3{
    background: rgb(19,121,204);
    background: linear-gradient(45deg, rgba(19,121,204,1) 0%, rgba(29,142,233,1) 39%, rgba(34,150,243,1) 65%, rgba(26,144,237,1) 79%, rgba(15,122,208,1) 100%); 

}


/* footer{
    margin-bottom: 100px;
} */

#contact{
    height: 80vh;
    width:100%;
    box-sizing: border-box;
    padding: 50px 0px 50px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#contact div{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.socialmedia-box{
    list-style: none;
    width:40vw;
    padding: 10vh 0px 12vh 0px;
    margin: 0px;
    display: flex;
    justify-content: space-around;
}

.socialmedia-box li img{
    height:60px;
}

footer{
    background-image: url('footer-image.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position-y: 100%;
    margin: 0px;
}




[data-title]:hover::after {
    opacity: 1;
    transition: all 0.01s ease;
    visibility: visible;
}
[data-title]::after {
    content: attr(data-title);
    background: rgb(202,164,241);
    background: linear-gradient(45deg, rgba(202,164,241,1) 7%, rgba(217,191,245,1) 49%, rgba(202,164,241,1) 91%); 
    border: 2px solid #510c83;
    border-radius: 4px;
    color: #111;
    font-size: 0.8rem;
    font-family: 'Montserrat',sans-serif;
    position: absolute;
    padding: 10px;
    top: 1.5rem;
    left: -5rem;
    opacity: 0;
    visibility: hidden;
}
[data-title] {
    position: relative;
}









@media screen and (max-width: 945px) and (min-width : 643px) {
    .nav-links{
        width:80%;
    }
    .intro-box{
        height:60vh;
    }
    .project-description{
        padding-top: 1em;
        padding-bottom: 1.5em;
    }
    .project-description p{
        margin-top: 10px;
        line-height: 1.5em;
    }
    .project-description h3{
        font-size: 1.2em;
    }
    #menu-title{
        font-size: 20px;
    }
}


@media screen and (max-width: 643px) and (min-width: 490px){
    .nav-links{
        width:90vw;
        margin-left: -38px;
    }
    .nav-links a{
        font-size: 14px;
    }
    /* .project-card{
        flex-direction: column;
        Not working!!
    } */
   .project-description, .project-image{
       width:100%;
       height: 50%;
   }
   #menu-title{
    font-size: 20px;
    } 
}


@media screen and (max-width: 490px) {
    nav{
        width: 10vw;
        visibility: hidden;
    }
    .nav-links{
        display: none;
    }
    /* Not a good way to fix it
    Change later */
    .hamburger{
        top: 20px;
        right:20px;
        height: 40px;
        width:40px;
    }
    .line{
        width: 18px;
        height: 2px;
        margin:2px;
    }
    .floating-navbar{
        top: 20px;
        right:20px;
        width:210px;
        border-radius: 20px;
    clip-path: circle(0px at right 20px top 20px);
    -webkit-clip-path: circle(0px at right 20px top 20px);
    }

    h1{
        font-size: 2em;
        margin: -10vh;
    }
    /* .socialmedia-box{
        width: 70vw;
    } */
}

@media screen and (max-width: 880px){
    h1{
        margin-bottom : 30vh;
    }
    .introduction p{
        color: black;
        text-align: center;
    }
    #about{
        margin-top: 20vh;
    }
    
}


@media screen and (max-width:700px) {
    .socialmedia-box{
        margin: 0px;
        width: 70vw;
    }    
}

@media screen and (max-width:298px) {
    .background{
        width: 100vw;
        box-sizing: border-box;
    }  
    h1{
        font-size: 3em;
    }  
}

@media screen and (max-width:643px) and (min-width:490px) {
    #about{
        margin-top: -30vh;
    } 
}

@media screen and (max-width:490px) {
    #about{
        margin-top: -40vh;
    } 
    h2{
        font-size: 2em;
    }
    .circle1{
        height: 6rem;
        width:6rem;
        top:-2%
    }
}

@media screen and (max-width:605px){
    .project-card:nth-of-type(2n+1){
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }
    .project-card:nth-of-type(2n){
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }
    .project-description, .project-image{
        height:50%;
        width:100%;
        overflow:hidden;
    }
    .project-card:nth-of-type(2n+1) .project-image{
        border-bottom-right-radius: 0;
        border-top-left-radius: 1em;
    }
    .project-card:nth-of-type(2n) .project-image{
        border-bottom-left-radius: 0;
        border-top-right-radius: 1em;
    }
    .project-description p{
        display: none;
    }
}

@media screen and (max-width:550px){
    html,body{
    width: 100%;
    overflow-x: hidden; 
    }
}

@media screen and (max-width:472px) and (max-height: 567px){
    /* .hi{
        visibility: hidden;
    } */
    #about{
        margin-top: 5vh;
    }
}

@media screen and (max-width:490px) and (min-width: 405px){
    #menu-title{
        font-size: 16px;
    }
}
@media screen and (max-width:405px){
    #menu-title{
        font-size: 12px;
    }
    .circle4, .circle5{
        opacity: 0.5;
    }
}

@media screen and (max-width:982px) and (min-width: 662px){
    .handle p{
        font-size: 12px;
    }
}
@media screen and (max-width:662px){
    #handle1,#handle2,#handle3,#handle4{
        width: 15vw;
        border-radius: 10%;
    }
    .handle p{
        font-size: 10px;
    }
    .glass{
        width:40vw;;
    }
}