#navbar_container {
    position: fixed;
    background-color: black;
    margin-top: calc(var(--navbar-height) * -1px);
    transition: margin-top 0.7s;
    z-index: 1000;
}

#navbar_container.open {
    margin-top: 0;
}

#navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 2vh 13vw;
    width: calc(100vw - 26vw);
}

#navbar li {
    list-style-type: none;
}
#navbar a:hover {
    text-decoration: underline; 
}

#navbar a {
    font-size: calc(max(2vw, 20px));
    cursor: pointer;
}

@media (width < 800px) {
    #navbar {
        flex-direction: column;
        justify-content: right;
        align-items: flex-end;
        margin: 2vh;
        width: calc(100vw - 4vh);
    }
    #navbar a {
        font-size: calc(max(5vw, 24px));
    }
    #navbar li {
        margin: 1vh 0;
    }
}