kids.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=PT+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@500&family=Montserrat:wght@500&family=PT+Sans&family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300&family=Inconsolata:wght@500&family=Montserrat:wght@500&family=PT+Sans&family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300&family=Inconsolata:wght@500&family=Montserrat:wght@500&family=PT+Sans&family=Raleway:wght@300&family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow&family=IBM+Plex+Sans:wght@300&family=Inconsolata:wght@500&family=Montserrat:wght@500&family=PT+Sans&family=Raleway:wght@300&family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow&family=IBM+Plex+Sans:wght@300&family=Inconsolata:wght@500&family=Montserrat:wght@500&family=PT+Sans&family=Poppins&family=Raleway:wght@300&family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow&family=Exo+2:wght@500&family=IBM+Plex+Sans:wght@300&family=Inconsolata:wght@500&family=Montserrat:wght@500&family=Noto+Sans:wght@300&family=PT+Sans&family=Poppins&family=Quicksand:wght@500&family=Raleway:wght@300;400&family=Sofia+Sans+Condensed&family=Ubuntu&display=swap');

body {
    overflow-x: hidden;
    overflow-y: scroll;

}

#Web-Head{
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
}

.nav-item a{
    font-size: larger;
    font-family: 'IBM Plex Sans', sans-serif;
}


.nav-item a:hover{
    text-decoration:underline;
    font-weight:400;
}


.loader{
    position: sticky;
    width: 100vw;
    margin-top: 70px;
    background-color: #2a2929;
    height: 3px;    
    animation-name: loading;
    animation-duration: 5s;
    z-index: -1;
}

@keyframes loading{
    0%{
        background: red;
        width:0px;
    }

    25%{
        background: red;
        width: 500px;
    }

    75%{
        background: red;
        width: 750px;
    }

    100%{
        background-color: black;
    }
}

.content{
    /* display: none;    */
    position: absolute;
    background: url(https://images.unsplash.com/photo-1601176682258-172d20729a0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1009&q=80);
    background-size: cover;
    background-repeat: no-repeat;
    height: 125vh;
    width: 100vw;
    /* margin: 73px 0px; */
}


.info{
    margin: 80px 40px 0px 40rem;
}

.info{
    color: white;
    padding: 50px;
}

.info p{
    padding: 50px 0px;
}

.info button{
    font-family: 'Exo 2', sans-serif;
}

section{
    position: absolute;
    color: black;
    margin: 15px;
}


.card{
    margin: 90px 0px;
}

.boys{
    position: absolute;
    height: 20px;
    margin: 50rem 0rem;
    display: flex;
    flex-wrap: wrap;
    width: 100vw;
    justify-content: space-evenly;
}

.boys section hr{
    width: 78rem;
    color: black;
}

.girls{
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    margin: 95rem 0rem;
    justify-content: space-evenly;
    width: 100vw;
}

.girls section hr{
    width: 78rem;
    color: black;
}

footer{
    display: flex;
    margin: 152rem 0rem 0rem 0rem;
    flex-direction: column;
}

.footer-link{
    display: flex;
}

.footer-info{
    display: flex;
    width: 100vw;
}

.row{
    width: 35vw;
}

.dev{
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: larger;
}

.dev i{
    margin: 25px 10px;
    height: 20px;
    font-size: 30px;
}
.dev a i:hover{
    cursor: pointer;
    text-decoration: underline;
    color: white;
}