@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;800&family=Racing+Sans+One&family=Rubik+Mono+One&family=Russo+One&family=Yellowtail&display=swap');



:root{

    --color-dark-red: #950101;

    --color-red: #F94C66;

    --color-green: #53BF9D;

    --color-violet: #BD4291;

    --color-yellow: #FFC54D;

    --color-black: #000000;

    --color-bg: #F2F2F2;

    --color-white: #FFFFFF;

    --color-white-alpha: rgba(255, 255, 255, 0.201);



    --font-primary: 'Russo One', sans-serif;

    --font-one: 'Yellowtail', cursive;

    --font-two: 'Baloo 2', cursive;

    --font-three: 'Racing Sans One', cursive;

    --font-four: 'Rubik Mono One', sans-serif;

}

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html{

    scroll-behavior: smooth;

}

body{

    background: var(--color-bg);

    font-size: 62.5%;

    font-family: var(--font-primary);

    padding-bottom: 150px;

    /* height: 100vh; */

}



.background{

    max-width: 100%;

    height: 100%;

    overflow: hidden;

}

.background img{

        position: absolute;

        top: 0;

        width: 100%;

        height: 100%;

        object-fit: cover;

        z-index: -1;

}



.main-body{

    position: absolute;

    z-index: 3;

    top: 5rem;

    font-size: 3rem;

    color: var(--color-black);

}

.description{

    display: flex;

    flex-direction: column;

    justify-content: center;

    font-family: var(--font-four);

    color: var(--color-white);

}

.main-page-info .container{

    /* height: 100%; */

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    background: var(--color-white-alpha);

    backdrop-filter: blur(5px);

}

.main-page-info h1{

    color: var(--color-yellow);

    font-family: var(--font-four);

}



/* Nav Bar Styles */

.navbar{

    border-color: transparent !important;

    color: var(--color-white) !important;

    transition: all 500ms !important;

}

.navbar-brand{

    font-family: var(--font-primary);

}

.scrolled{

     background-color: #0B091F !important;

}

.navbar-collapse{

    transition: all 500ms !important;

}