@media (max-width: 1000px) { 

    /** Change the size of a rem */
    html {
        font-size: 20px;
    }

    :root{
        --nav-div-margin: 0.5rem 0rem 1.5rem 20vw;
        --nav-div-width: 40vw;
    }


}
    

@media (min-width: 1000px) { 

    /** Change the size of a rem */
    html {
        font-size: 15px;
    }

    :root{
        --nav-div-margin: 0.5rem 0rem 1.5rem 14rem;
        --nav-div-width: 40vw;
    }

}



body{
    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
}

a{
    text-decoration: none;
}

.nav-banner{
    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
    width: 100%;
    background-image: linear-gradient(180deg, rgb(46, 46, 175), rgb(102, 102, 223));
    flex-direction: column;
    flex-wrap: wrap;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.nav-title{
    margin: 2.5rem 1.5rem 0rem 1.5rem;
    color: rgb(0,0,0);
    font: bold 2.0rem Serif;
    width: 20rem;
    text-align: center;
}

.nav-item{
    margin:  1rem 1.5rem 1rem 1.5rem;
    color: rgb(160, 160, 160);
    text-shadow: 0.2rem 0.2rem 0.2rem rgb(12, 12, 12);
    font: bold 1.4rem Serif;
    text-decoration: none;
}

.nav-item-selected{
    margin:  1rem 1.5rem 1rem 1.5rem;
    color: rgb(255,255,255);
    text-shadow: 0.2rem 0.2rem 0.2rem rgb(12, 12, 12);
    font: bold 1.4rem Serif;
    text-decoration: none;
}

.nav-div{
    margin: var(--nav-div-margin);
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--nav-div-width);
}