html{
    scroll-behavior: smooth;
}

::-webkit-scrollbar{
    width: 1rem;
}

::-webkit-scrollbar-track{
    background-color: rgb(20,20,65);
}

::-webkit-scrollbar-thumb{
    background-color: rgb(0,0,65);
    border-radius: 1rem;
    border: 0.1rem solid transparent;
}

.preLoader{
    position: fixed;
    top: 0%;
    left: 0%;
    z-index: 9999;
    
    height: 100vh;
    width: 100vw;
    background-color: black;

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

}

.preLoaderRef p, 
.preLoaderRef p a{
    color: rgba(255,255,255,.1);
    text-decoration: none;
}

.preLoaderItself img{
    height: 50vh;
}

.preLoaderRef{
    position: fixed;
    bottom: 0%;
    right: 5%;
}

body{
    font-family: 'Edu TAS Beginner', cursive;
    font-family: 'Inconsolata', monospace;
    background-color: rgb(17,2,54);
    overflow-x: hidden;
}

.mobileMessage{
    height: 100vh;
    width: 100vw;
    background-color: gray;
    display: none;
}

/* Header section starts here */

header{
    z-index: 1000;
    position: sticky;
    top: 0%;
}


header nav{
    z-index: 1000;
    top: 0%;
    padding-left: 2%;
    padding-right: 2%;
    height: 15vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header nav ul{
    width: 45%;
    height: 90%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

header nav ul li{
    list-style: none;
}

header nav ul li a{
    padding: 18%;
    border-radius: 10px;
    text-decoration: none;
    color: white;
    font-size: 1.2em;
}

.leftNavigation{
    width: 30%;
    display: flex;
    justify-content: space-around;
}

.leftNavigation h1{
    font-size: 2em;
    color: white;

    font-family: 'Castoro Titling', serif;
    font-family: 'Fasthand', cursive;
    font-family: 'Fira Sans', sans-serif;
    font-family: 'Roboto', sans-serif;
}

header nav ul li a:hover,
header nav ul li a.activeNavigator{
    background-color: purple;
}

/*Home section starts here*/

#home{
    position: relative;
    height: 100vh;
    width: 100vw;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.bodyBackgroundImages{
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0%;
    left: 0%;
}


#backgroundStars{
    z-index: -12;

    height: 120vh;
    width: 130vw;
    top: 0%;
    left: -10%;
}

#backgroundMoon{
    z-index: -11;
    
    height: 20vh;
    width: 10vw;
    top: 0%;
    left: 35%;
}

#backgroundMoon.activeOne{
    animation: pageLoadBackgroundMoon 1.8s ease;   
}

#midBackgroundLeft{
    z-index: -10;
    
    height: 70vh;
    width: 70vw;
    top: 12%;
    left: -2%;
}

#midBackgroundLeft.activeTwo{
    animation: pageLoadMidBackgroundLeft 1.4s ease;
}

#midBackgroundRight{
    z-index: -9;
    
    height: 100vh;
    width: 105vw;
    top: 0%;
    left: 0%;
}

#midBackgroundRight.activeThree{
    animation: pageLoadMidBackgroundRight 1.2s ease;
}

#foreGroundTwo{
    z-index: -8;
    
    height: 50vh;
    width: 100vw;
    top: 25%;
}

#foreGroundTwo.activeFour{
    animation: pageLoadForegroundTwo 1.5s ease;
}

#foreGround{
    z-index: -7;
    
    height: 130vh;
    width: 102vw;
    top: -45%;
    left: -2%;
}   

#foreGround.activeFive{
    animation: pageLoadForeground 1.7s ease;
}

@keyframes pageLoadBackgroundMoon{
    0%{
        top: 60%;
        left: 45%;
    }
    100%{
        top: 0%;
        left: 35%;
    }
}
@keyframes pageLoadMidBackgroundLeft{
    0%{
        top: 49%;
    }
    100%{
        top: 12%;
    }
}
@keyframes pageLoadMidBackgroundRight{
    0%{
        top: 25%;
    }
    100%{
        top: 0%;
    }
}
@keyframes pageLoadForegroundTwo{
    0%{
        top: 55%;
    }
    100%{
        top: 25%;
    }
}
@keyframes pageLoadForeground{
    0%{
        top: 0%;
    }
    100%{
        top: -45%;
    }
}

/*For the greeting card */

.greetingCard{
    user-select: none;
    pointer-events: none;
    z-index: 1;
    height: 15vh;
    width: 40vw;
    padding: 1%;
    background-color: rgba(0,72,145,.4);
    border-radius: 25px;
    box-shadow: 5px 5px 20px black;
    overflow: hidden;

    position: absolute;
    top: 25%;
    left: 5%;

    display: flex;
    flex-direction: column;
    color: black;
    transform: translateY(20px);
    opacity: 0;
    transition: 1s ease;

    font-family: 'Edu TAS Beginner', cursive;
    font-family: 'Inconsolata', monospace;
    font-family: 'Manrope', sans-serif;
    font-weight: bold;

}

.active{
    transform: translateY(0px);
    opacity: 1;
    pointer-events: all;
}

.greetingCard:hover{
    transform: scale(1.02);
    background-color: rgba(0,72,145,.9);
    height: 80vh;
    opacity: 1;
    top: -10%;
    box-shadow: 5px 5px 20px rgba(5,5,5,.7);
}

.upperGreet{
    height: 16vh;
    padding:1%;
    display: flex;
    justify-content: space-around;
    font-size: 1.4em;
}

.upperGreet img{
    height: 80%;
    border-radius: 10px;
    box-shadow: 2px 2px 10px black;
}

.underLine{
    height: .5%;
    width: 85%;
    background-color: black;
}

.lowerGreet{
    width: 95%;
    margin-left: 2%;
}

#seePeopleButton{
    background-color: rgb(128, 0, 128);
    color: black;
    transition: scale .5s ease, border .2s ease;
    /* border: 2px solid darkslategray; */
}

#seePeopleButton:hover{
    scale: 1.05;
}

#seePeopleButton:active{
    padding-left: 2%;
    /* border: 2px solid darkgray; */
}

.slidingCardsContainer{
    user-select: none;
    pointer-events: none;
    scroll-behavior: smooth;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: 0;
    position: absolute;
    top: 12%;
    left: 56%;
    border-radius: 15%;
    height: 60vh;
    width: 35%;
    cursor: grab;
    opacity: 0;
    transition: .8s all ease;
    background-size: contain;
}

.slidingCardsContainer:hover{
    scale: 1.04;

}

.slidingCardsContainer.activated{
    opacity: 1;
    user-select: all;
    pointer-events: all;
}

.slidingCardsContainer::-webkit-scrollbar{
    display: none;
}

.slidingCardsContainer.dragging{
    scroll-snap-type: none;
    scroll-behavior: auto;
    cursor: grabbing;
}

.slidingCardsContainer ul li{
    list-style: none ;
    pointer-events: none;
    user-select: none;
}

.card{
    scroll-snap-align: start;
    border-radius: 15%;
    margin-bottom: 10%;
    width: 85%;
    padding: 2%;
    height: 55vh;
    background-color: rgba(0,0,0,.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 600;
    color: rgb(191, 191, 231);
}

.card h2{
    font-size: 2em;
}

.card img{
    box-sizing: border-box;
    height: 20vh;
    border-radius: 50%;
    scale: .9;
    border: 4px solid black;
}

.cardImage{
    background-color: rgba(40,40,105,.9);
    border-radius: 50%;
}

.card p{
    padding: 2%;
}

/* Home section ends here */

/* About section starts here */
#about{
    /* margin-top: 100vh; */
    font-family: cursive;
    z-index: 1;
    position: relative;
    top: -16%;
    left: -1%;
    height: 100vh;
    width: 105%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    background-color: rgb(17,2,54);
}

.aboutSectionHalves{
    font-size: 1.2em;
    user-select: none;
    height: 60vh;
    width: 90%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.aboutSectionTopLeft, .aboutSectionTopRight{
    display: flex;
    flex-direction: column;
    padding: 1%;
    align-items: center;
    height: 90%;
    width: 40%;
    background-color: rgba(0,0,0,.7);
    border-radius: 30px;
    transition: .5s all ease;
}

.aboutSectionTopLeft:hover, .aboutSectionTopRight:hover{
    background-color: rgba(0,0,0,1);
}
/* About section ends here */

/* Pojects section starts here */
#projects{
    height: auto;
    width: 100%;
    margin-top: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    /* background-color: rgb(0,0,65); */
    background-color: rgb(17,2,54);
}

.webAppContainer{
    margin-top: 2%;
    height: 90vh;
    width: 98%;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.webAppLeftSide{
    height: 95%;
    width: 45%;
    margin-left: 3%;
    overflow-x: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
}


.weatherImageBackground{
    height: 70%;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;
}

#weatherImage{
    user-select: none;
    height: 90%;
    width: 65%;

    transition: .8s all ease;
}

.weatherDetails{
    height: 30%;
    width: 100%;
    
    display: flex;
    justify-content: space-between;
}

.detailCard{
    user-select: none;
    border-radius: 15%;
    margin-top: 2%;
    height: 90%;
    width: 30%;
    background-color: rgba(0,0,0,.7);
    
    display: flex;
    flex-direction: column;
    align-items: center;
}

.detailCard:hover{
    background-color: rgba(0,0,0,1);
}

.webAppRightSide{
    height: 95%;
    width: 45%;
    margin-right: 3%;   
    border-left: 2px solid rgba(0,0,0,.5);

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.upperDetailsPart{
    height: 20%;
    width: 90%;

    display: flex;
    justify-content: space-around;
    align-items: center;
}


.upperDetailsPart input{
    font-size: 1.2em;
    box-sizing: border-box;
    height: 60%;
    width: 85%;
    padding: 2%;
    border: none;
    background-color: black;
    color: white;
    border-radius: 15px;
}

.upperDetailsPart img{
    height: 35%;
    width: 8%;
    transition: .3s all ease;
    cursor: pointer;
}

.upperDetailsPart img:hover{
    scale: 1.1;
}

.lowerDetailsPart{
    margin-top: 5%;
    height: 70%;
    width: 90%;

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

}

.lowerDetailsPartTop{
    user-select: none;
    height: 45%;
    width: 100%;

    position: relative;
}

.lowerDetailsPartTop h1{
    position: absolute;
    top: 25%;
    left: -6%;
}

.lowerLeftDetailsPart{
    height: 90%;
    width: 55%;

    /* background-color: red; */
}

.lowerRightDetailsPart{
    user-select: none;
    height: 90%;
    width: 40%;
    color: white;
}

.humidityLoaderBackground{

    box-sizing: border-box;
    height: 100%;
    width: 50%;
    background-color: rgb(80,88,98);
    border-radius: 50%;

    overflow: hidden;

    position: absolute;
    top: 0%;
    left: 35.5%;
}

.humidityLoaderEdge{

    box-sizing: border-box;
    height: 100%;
    width: 50%;
    border: 5px solid rgb(120,185,235);
    border-radius: 50%;
    
    position: absolute;
    top: 0%;
    left: 35.5%;
}

.humidityForeground{
    box-sizing: border-box;
    height: 85%;
    width: 40%;
    background-color: rgb(120,185,235);
    border-radius: 50%;
    
    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: 7.5%;
    left: 40.5%;
}

.humidityLoader{
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,1),rgba(0,0,0,.8),rgba(0,0,0,.4),rgba(0,0,0,.1));

    position: absolute;
    top: 90%;

    transition: 3s all ease;
}

.lowerDetailsPartBottom{
    margin-top: 3%;
    height: 50%;
    width: 100%;
    /* background-color: red; */
    font-family: 'Edu TAS Beginner', cursive;
    font-family: 'Inconsolata', monospace;
    font-family: 'Manrope', sans-serif;
    font-size: .8em;
}

.lowerRightBottomWeatherDetails{
    height: 100%;
    width: 100%;

    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}

.detailCardRightSide{
    border-radius: 15%;
    height: 40%;
    width: 90%;
    background-color: rgba(0,0,0,.7);
    
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
}

.detailCardRightSide:hover{
    background-color: rgba(0,0,0,1);
}

#mainHumidity{
    transition: 10ms all ease;
}

#cityName,
#displayedCityName,
#windSpeed,
#mainTemperature,
#feelsLikeTemperature {
    transition: 1s all ease;
}

.sectionHeading{
    font-size: 3em;
    font-family: cursive;
    width: 95%;
    transition: 1s all ease;
    text-align: center;
}

.sectionHeading:hover{
    background-color: rgba(0,0,0,.1);
}


.other-project-container{
    margin-top: 3%;
    height: auto;
    width: 100%;
    padding-left: 8%;
    padding-right: 5%;
    display: flex;
    flex-wrap: wrap;
    gap: 8%;
}

.other-project-card{
    height: 70vh;
    width: 24%;
    background: rgba(0,0,0,0.5);
    border-radius: 15px;
    padding-left: 1%;
    padding-right: 1%;
    margin-bottom: 5%;
}

.other-project-card img{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 50%;
    width: 100%;
    background-size: cover;
    transition: all 250ms ease;
}

.other-project-card h3, p, h5, a{
    transition: all 250ms ease;
}

.other-project-card h5,a{
    transform: translateY(-10px);
}

.other-project-card:hover > img{
    transform: translate(30px, -30px);
    box-shadow: 10px 10px 20px black;
}

.other-project-card:hover > h3{
    transform: translateY(-20px);
}

.other-project-card:hover > p{
    transform: translateY(-20px);
}

.other-project-card:hover > h5{
    transform: translateY(-30px);
}

.other-project-card:hover > a{
    transform: translateY(-30px);
}

/* Project section ends here */

/* Contact section starts here */
#contact{
    margin-top: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    height: 100vh;
    width: 100vw;

    background-color: rgb(17,2,54);
}


.sectionerContact{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    /* background-color: gray; */
}

.pictureSlideShowContainer{
    margin-top: 1%;
    height: 95%;
    width: 45%;
    color: white;
    font-family: 'Castoro Titling', serif;
    font-family: 'Fasthand', cursive;
    font-family: 'Fira Sans', sans-serif;
    font-family: 'Roboto', sans-serif;
}

.starsImageContainer{
    box-shadow: 4px 4px 10px black;
    height: 82%;
    width: 100%;
    background-color: brown;
    background: url("/assets/Images/slideShow/one.jpg");
    background-size: cover;
    background-repeat: no-repeat;

    animation: starsSlideShowAnimation 35s infinite ease;
}

@keyframes starsSlideShowAnimation{
    0%{
        background: url("/assets/Images/slideShow/one.jpg");
        background-size: 100% 100%;
    }
    10%{
        background: url("/assets/Images/slideShow/two.jpg");
        background-size: 100% 100%;
    }
    20%{
        background: url("/assets/Images/slideShow/three.jpg");
        background-size: 100% 100%;
    }
    40%{
        background: url("/assets/Images/slideShow/four.jpg");
        background-size: 100% 100%;
    }
    50%{
        background: url("/assets/Images/slideShow/six.jpg");
        background-size: 100% 100%;
    }
    60%{
        background: url("/assets/Images/slideShow/seven.jpg");
        background-size: 100% 100%;
    }
    70%{
        background: url("/assets/Images/slideShow/eight.jpg");
        background-size: 100% 100%;
    }
    80%{
        background: url("/assets/Images/slideShow/nine.jpg");
        background-size: 100% 100%;
    }
    90%{
        background: url("/assets/Images/slideShow/ten.jpg");
        background-size: 100% 100%;
    }
    100%{
        background: url("/assets/Images/slideShow/eleven.jpg");
        background-size: 100% 100%;
    }
}

form{
    display: flex;
    flex-direction: column;
    padding-top: 2%;
    justify-content: center;
    height: 95%;
    width: 20%;
}



form input{
    padding: 2%;
    border: none;
    background-color: black;
    border-radius: 15px;
    color: white;
    height: 8%;
    width: 115%;
}

form textarea{
    padding: 2%;
    resize: none;
    background-color: black;
    border-radius: 15px;
    color: white;
    height: 25%;
    width: 130%;
    position: relative;
}

form label{
    color: gray;
    position: relative;
    top: -6%;
    left: 3%;
    cursor: text;

    transition: all .5s ease;
}

form button{
    box-sizing: border-box;
    border-radius: 15px;
    background-color: black;
    border: 1px solid black;
    color: white;
    height: 8%;
    width: 28%;
}

form button:active{
    border: 1px solid white;
}

#messageLabel{
    top: -22%;
}

#name:focus~#nameLabel,
#name:valid ~ #nameLabel{
    top: -14%;
    color: white;
}
#number:focus~#contactLabel,
#number:valid~#contactLabel{
    top: -14%;
    color: white;
}
#email:focus~#emailLabel,
#email:valid~#emailLabel{
    top: -14%;
    color: white;
}
#message:focus~#messageLabel,
#message:valid~#messageLabel{
    top: -31%;
    color: white;
}

.displayNotSupported{
    display: none;
}


@media only screen and (max-width: 600px), 
(min-width: 577px) and (max-width: 768px), 
(min-width: 769px) and (max-width: 992px), 
(min-width: 993px) and (max-width: 1200px) 
{

    header nav{
        display: none;
    }

    #home{
        display: none;
    }

    #about{
        display: none;
    }

    #projects{
        display: none;
    }

    #contact{
        display: none;
    }
    
    body{
        background: radial-gradient(circle,rgba(0,0,0,.9),rgba(0,0,0,1));

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .displayNotSupported{
        height: 40vh;
        width: 95vw;
        background-color: rgba(0,0,0,.6);
        color: gray;
        display: flex;
        justify-content: center;
        align-items: center;

        text-align: center;
        transition: all 300ms ease;
    }

    @keyframes amuser{
        0%{
            color: grey;
        }
        33%{
            color: white;
        }
        66%{
            color: darkslategrey;
        }
    }

    .displayNotSupported:hover{
        color: white;
        animation: amuser 5s infinite alternate ease;

        font-size: 1.02em;

    }
}