@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600;800;900&display=swap');

html {
    background-color: rgba(12, 7, 66, 0.968);
    overflow: hidden;
    padding: none;
}

body{
    margin: none;
    padding: none;
    overflow: hidden;
    
}

*{
    margin: 0px;
    padding: 0; 
    box-sizing: border-box;
    font-family: 'Inconsolata', monospace;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
}



#contact-me-svg{
    width: 83.75vw;
    height: 11.17vw;
    animation: waveAnimationLeft 8s ease-in-out infinite 1s;
}

.contact-me-container{
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 24;
    width: 100vw;
    height: 11.17vw;
    clip-path: polygon(10vw 5vw , 28vw 0vw , 56vw 0vw , 100vw 11.17vw , 0vw 11.17vw) ;

}


#experience-unselected{
    width: 100vw;
    height:17.13vw ;
    animation: waveAnimationRight 5s ease-in-out infinite;
}

.experience-container{
    position: absolute;
    bottom: 0vw;
    z-index: 22;
    width: 100vw;
    height:17.13vw ;
    clip-path: polygon(0 0,0.0vw 14.71vw , 14.71vw 5.88vw , 29.41vw 0.74vw , 36.76vw 0.74vw , 73.53vw 8.82vw , 80.88vw 5.88vw , 89.71vw 0.0vw , 100vw 0vw , 100vw  17.13vw , 0vw 17.13vw);
    
}

#tech-stack-unselected{

    position: absolute;
    bottom: 0px;
    right: -1.1vw;
    width: 75.44vw;
    height: 23.67vw;
    animation: waveAnimationRight 8s ease-in-out infinite ;
}

.tech-stack-container{

    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: 20;
    width: 78.44vw;
    height: 23.67vw;
    clip-path: polygon(30.0vw 24.34vw , 35.35vw 11.03vw , 44.85vw 4.3vw , 60.76vw 2.94vw ,  100vw -3vw ,  100vw 23.56vw , 24vw 23.56vw );
    
    
}

div[class*="container"]{
    overflow: hidden;
}

#about-me-unselected{
    width: 100vw;
    height: 41.84vw;
    animation: waveAnimationDown 12s ease-in-out infinite ;
}

.about-me-container{
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 41.84vw;
    z-index: 18;
    clip-path: polygon(0vw 48.1vw , 0.0vw 38.24vw , 11.03vw 27.94vw , 25.74vw 20.59vw , 36.76vw 19.12vw , 51.47vw 21.32vw , 66.18vw 20.59vw , 88.24vw 1.47vw , 100vw 0vw , 100vw 48.1vw);
}

#side-hustle-unselected{
    width: 100vw;
    height: 28.82vw;
    animation: waveAnimationUp 10s ease-in-out infinite ;
}

.side-hustle-container{
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 16;
    width: 100vw;
    height: 28.82vw;
}

#moon{
    position: absolute;
    right: 11vw;
    top: -3vh;
    height: 67vh;
    z-index: 15;
}

.moonbox{
    position: absolute;
    
    height: 67vh;
    width: 100vw;
    filter: blur(0x);
}

a[id*="clickable"]{
    cursor: pointer;
}

/*------------------------------------------     animation     ----------------------------------------------------------------------------- */

@keyframes waveAnimationLeft {
    50% {
        transform: translateX(7.35vw);
    }
}

@keyframes waveAnimationRight {
    50% {      
        transform: translate(2vw , 1vw);
    }  
}

@keyframes waveAnimationDown {

    50% {      
        transform: translate(0vw , 2vw);
    }  
}

@keyframes waveAnimationUp {

    50% {      
        transform: translate(0vw , 3vw);
    }  
}
/*  ----------------------------- ------------------------         clouds               --------------------------------------------------------------*/

.cloud-container{
    position: absolute;
    z-index: 15;
    width: 100vw;
    height: 13vw;
    cursor: pointer;
}

.cloud-container img{
    position: absolute;
    right: 0;
}

#cloud1{
    top: 0vw;
    z-index: 1;
    animation: cloudanimate 10s ease-in-out infinite;
}

#cloud2{
    top: -6vw;
    right: -4vw;
    z-index: 2;
    animation: cloudanimate 15s ease-in-out infinite ;
}

#cloud3{
    top: -3vw;
    right: -3vw;
    z-index: 3;
    animation: cloudanimate 8s ease-in-out  infinite 3s ;
}

@keyframes cloudanimate {
    from{
        transform: translateX(0);
    }
    50%{
        transform: translateX(-6vw);
    }

    to{
        transform: translateX(0);
    }
    
}

/* ------------------------------------------              about me selected          -------------------------------------------------------------*/
#about-me-selected{
    position: absolute;
    left: 100vw;
    bottom: -48.4vw;
    height: 48.31vw;
    width: 100vw;
    transition: 2s;    
}



.about-me-selected-container{
    position: absolute;
    height:48.31vw;
    width: 100vw;
    bottom: -48vw;
    z-index: 19;    
    clip-path: polygon(0vw 47vw ,2vw 40vw ,11vw 30vw, 23vw 0vw , 36vw 0vw, 40vw 10vw , 77vw 7vw , 88vw 0vw , 100vw 0vw , 100vw 48.1vw , 0vw 48.1vw);
}


#india {
    width: auto; 
    height: 100%; 
    position: absolute; 
    left: 15vw;
    z-index: 1;
    transition: 2s ;
    bottom: -48.1vw;
}


.about-me-selected-container div[id*="section"]{
    width: 19rem;
    height: auto;
    padding: 0.5vw;
    background-color: rgba(23, 66, 224, 0.44);
    border-radius: 2rem;
    border: 0.05rem solid rgba(255, 255, 255, 0.52);
    letter-spacing: 2px;
    text-align: center;
    color:aliceblue;
    font-weight: 400;
}


#about-me-from-section{
    position: absolute;
    bottom: -17vw;
    left: 30%;
    z-index: 2;
    transition: 1s;
    
}

#about-me-from-section p span{
    color: rgba(2, 255, 43, 1);
}

#about-me-education-section{
    position: absolute;
    bottom: -21vw;
    left: 55%;
    z-index: 2;
    transition: 1s;
}

#about-me-extra-section{
    position: absolute;
    width: 14rem;
    bottom: -28vw;
    left: 80%;
    z-index: 2;
    transition: 1s;
}



/* about me animation */
@keyframes about-me-transition {

    from{
        transform: translate( 50vw , 48.31vw);
    }
    to{
        
    }
}

@keyframes rise-up {
    from{
        transform: translateY(50vw);
    }
}


/* ------------------------------------------  tech stack selected  -------------------------------------------------------------------- */



.tech-stack-selected-container{
    position: absolute;
    width: 78.44vw;
    height: 30.67vw;
    z-index: 21;
    bottom: -40vw;
    right: 0;
    clip-path: polygon(11vw 30.67vw , 28vw 11.03vw , 38vw 5.15vw , 50.24vw 3vw , 78.41vw 0vw , 78.41vw 30.67vw , 0vw 30.67vw) ;
    
}

#tech-stack-selected{
    position: absolute;
    width: 100vw;
    height: 40.67vw;
    bottom: -50vw;
    right: -5vw;
    z-index: 1;
    transition: 2s;
}

.languages-section{
    position: absolute;
    display: grid;
    grid-template-columns: repeat(5 , 3vw);
    grid-template-rows: repeat(3 , 3vw);
    gap: 0.4vw;
    justify-items: center;
    align-items: center;
    right: 22vw;
    bottom: -9.5vw;
    z-index: 2;
    width: auto;
    transition: 2s;
}

.languages-section img{
    width: 3vw;
    grid-column: 3;
    grid-row: 2;
    transition: 2s;
    animation: wobble 4s ease-in-out infinite;
}


#languages-heading{
    position: absolute;
    right: 26vw;
    bottom: -20vw;
    z-index: 3;
    transition: 2s ;
}

.tools-section{
    position: absolute;
    display: grid;
    grid-template-columns: repeat(5 , 3vw);
    grid-template-rows: repeat(3 , 3vw);
    gap: 0.4vw;
    column-gap: 1vw;
    justify-items: center;
    align-items: center;
    right: 5vw;
    bottom: -11vw;
    z-index: 2;
    width: auto;
    transition: 2s;
    
}

.tools-section img{
    width: 3vw;
    grid-column: 3;
    grid-row: 2;
    transition: 2s;
    animation: wobble 4s ease-in-out infinite;

}

#tools-heading{
    position: absolute;
    right: 11.5vw;
    bottom: -22vw;
    z-index: 3;
    transition: 2s;
}

@keyframes wobble {
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform:rotate(10deg)
    }
    75%{
        transform: rotate(-10deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

/* -----------------------------------------------------    experience    ------------------------------------------------------------------ */

.experience-selected-container{
    position: absolute;
    height: 27.84vw;
    width: 100vw;
    bottom: -30vw;
    right: 0vw;
    z-index: 23;
    clip-path: polygon( 0 0 ,0.0vw 24.06vw , 14.71vw 11.56vw , 36.76vw 3.8vw , 47.0vw 3.0vw , 73.53vw 16.71vw , 80.88vw 16.71vw , 97.06vw 5.16vw , 100.0vw 5.3100000000000005vw , 100vw 0vw , 100vw 28.84vw , 0vw 28.84vw);
    
}

#experience-selected{
    position: absolute;
    height: 20.84vw;
    width: 100vw;
    bottom: -30vw;
    transition: 2s;
}

.projects-section{
    position: absolute;
    height: 8vw;
    width: 8vw;
    background-color: rgb(65, 139, 219);
    z-index: 1;
    bottom: -12vw;
    left: 36vw;
    border-radius: 40% ;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 23;
    transition: 2.5s;
    cursor: pointer;
    
}

.projects-section .projects{
    text-decoration: none;
    box-sizing: content-box;
    position: absolute;
    z-index: 22;
    display: flex;
    height: 0vw;
    width: 0vw;
    bottom: 50%;
    left: 50%;
    background-color: rgba(17, 68, 178, 0.559);
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    transition: 2s;
    border: 0rem solid white;
    overflow: hidden;
}

.clickme{
    float: inline-start;
    position: relative;
    top: 35%;
    left: -9%;
    background-color: rgba(4, 3, 23, 0.641);
    padding: 0.3rem;
}

.project_card{
    color: aliceblue;
    z-index: 50;
    position: absolute;
    height: 9rem;
    width: 0rem;
    background-size: 100% 100%;
    margin: 20px;
    transition: 1s;
    overflow: hidden;
    
}

.project_card.hover{
    width: 20rem;
    filter: blur(0px);
}

.project_card p{
    margin-top: 5%;
    font-size: small;
}

.transit{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg , rgba(255, 255, 255, 0) , 50%, rgb(3, 2, 5));
}

.project-info-card{
    float: right;
    box-sizing: border-box;
    width: 50%;
    padding: 1rem;
    height: 97%;
    margin: 1%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0.1rem solid white;
    border-left-color: rgba(0, 0, 0, 0) ;
    
}

.link{
    float: left;
    height: 2.3rem;
    width: 2.3rem;
    background-image: radial-gradient(rgba(255, 255, 255, 0.556), 10%,  rgb(0, 0, 0));
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    left: 20%;
    top: 40%;
}

.link-svg{
    height: 1.5rem;
}

.projects-section div h6{
    margin: 2vw;
    transition: 4s;
    user-select: none;
}

/* droplet */

.droplets{
    position: absolute;
    height: 2vw;
    width: 2vw;
    z-index: 22;
    bottom: -15vw;
    transition: 1s;
}

.droplets div{
    position: absolute;
    background-color: rgb(173, 200, 223);
    background-image: radial-gradient(rgb(228, 255, 252) , rgb(144, 226, 241) );
    border: 1px solid rgba(255, 255, 255, 0);
    transition: 3s;
    border-radius: 50% ;
    filter: blur(10px);
}

@keyframes blurunblur {
    from{
        filter: blur(1vw);
    }
    50%{
        filter: blur(3px);
        
        
    }
    to{
        filter: blur(1vw);
    }
}

/* --------------------------------------------------  side hustles   ------------------------------------------------------------------------ */

.side-hustle-selected-container{
    position: absolute;
    bottom: -40vw;
    left: 0;
    height: 37vw ;
    width: 100vw;
    z-index: 17;
    color: aliceblue;
    letter-spacing: 0.3rem;
}

#side-hustle-selected{
    position: absolute;
    bottom: -40vw;
    left: 0;
    height: 37vw ;
    width: 100vw;
    z-index: 1;
    transition: 2s;
}

.side-hustle-selected-container div{
    position: absolute;
    width: 20rem;
    z-index: 2;
    text-align: center;
    transition: 1.5s;
    
}

.hobby1{
    left: 2vw;
    bottom: -19vw;
    
}

.hobby2{
    width: 2rem;
    left: 34vw;
    bottom: -21vw;
}

.hobby2 a{
    color: aqua;
    cursor: pointer;
    letter-spacing: 0;
    text-decoration: underline;
}
/* -----------------------------------------------------  connect with me  ----------------------------------------------------------- */
.logos{
    position: absolute;
    left: 19vw;
    bottom: 2.5vw;
    background-color: rgba(240, 248, 255, 0);
    width: 40vw;
    height: 3vw;
    z-index: 25;

    display: flex;
    justify-content: space-evenly;
    align-items: center;

}

.logos a img{
    cursor: pointer;
}

/* ---------------------------------------------------   Intoduction   --------------------------------------------------------------------- */
.intro-box{
    position: absolute;
    width: 30rem;
    height: 13rem;
    color: white;
    margin-left: 3vw;
    margin-top: 2vw;
    z-index: 16;

}

.profile-pic{
    float: left;
    height: 6rem;
    width: 6rem;
    background-color: black;
    border-radius: 50%;
    border: 0.2rem solid white;
    margin-top: 1rem;
}

.short-about-me{
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    clear: left;
    width: 20rem;
    padding: 0.5rem 1rem;
    margin-left: 3.5rem;
    margin-top: 0.6rem;
    background-color: rgba(25, 31, 173, 0.12);
    border-radius: 20px ;
    
    
}

.short-about-me p{
    font-size: 1rem;
    text-align: center;
    font-weight: lighter;
    letter-spacing: 0.3rem;
    
}

.name p {
    font-size: 4rem;
    letter-spacing: 1rem;
    font-weight:600;
    margin-left: 7rem;
}

h6{
    color: white;
    letter-spacing: 5px;
}

#contact-me-heading{
    position: absolute;
    z-index: 28;
    bottom: 7vw;
    left:32vw ;
}

#experience-heading{
    position: absolute;
    z-index: 28;
    bottom: 8vw;
    right: 3.5vw ;
}

#tech-stack-heading{
    position: absolute;
    z-index: 28;
    bottom: 13vw;
    right: 21vw;
    transition: 1s;
}

#about-me-heading{
    position: absolute;
    z-index: 28;
    bottom: 30vw;
    right: 4vw;
    transition: 1s;
}

#side-hustle-heading{
    position: absolute;
    z-index: 28;
    bottom: 19vw;   
    left: 4vw;     
    transition: 2s; 
}

/* exit hint */

.exit-hint{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0.2vw;
    bottom: 2vw;
    z-index: 50;
    height: 3rem;
    width: 0rem;
    background-color: rgba(0, 0, 0, 0.256);
    color: aliceblue;
    border-radius: 1rem;
    overflow: hidden;
    letter-spacing: 0.1rem;
    border: 1px solid rgba(255, 255, 255, 0.43);
    transition: 2s;
    box-sizing: border-box;
}

.exit-hint h4{
    min-width: 18rem;
    text-align: center;
}




/* responsive design for mobile devices */
@media screen and (max-width: 768px) {
    #moon{
        position: static;
        height: 30vh;
    }

    .moonbox{
        display: flex;
        align-items: center;
        justify-content: center;
        filter: blur(5px);
    }

    .intro-box{

        position: relative;
        flex-direction: column;
        background-color: rgba(17, 87, 218, 0.295);
        height: fit-content;
        width: 90vw;
        border-radius: 5vw;
        border-top-left-radius: 13vw;
        border-top-right-radius: 13vw;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 5vw;
    }

    .profile-pic{
        float: none;
        margin-left: auto;
        margin-right: auto;
    }

    .name p{
        font-size: 9vw;
        margin-left: 0.3rem;
        text-align: center;
        color: rgb(255, 255, 255);
    }

    .short-about-me{
        
        clear: none;
        width: 56vw;
        margin-left: auto;
        margin-right: auto;
        justify-self: end;
    }

    .short-about-me p{
        font-size: 3vw;
        text-align: center;
        letter-spacing: 0.25rem;
    }

    h6{
        display: none;
    }

    
  }