
nav
    {
        background-color: rgba(211, 208, 208, 0.945);
        box-shadow: 3px 3px 5px rgba(0, 0, 0,0.1);
    }
nav ul
    {
        width: 100%;
        list-style: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }
nav li
    {
        height: 50px;
    }
nav a
    {
        height: 100%;
        padding: 0 30px;
        text-decoration: none;
        display: flex;
        align-items: center;
        color: black;
    }
nav a:hover
    {
        background-color: #f0f0f0;
    }

.sidebar
    {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 250px;
        z-index: 999;
        background-color: rgba(153, 153, 153, 0.911);
        box-shadow: -10px 0 10px rgba(0,0,0,0.1);
        display: none;
        flex-direction: column;
        align-items: right;
        justify-content: flex-start;
    }    
.sidebar li
    {
        width: 100%;
    }
.sidebar a
    {
        width: 100%;
        height: 100%;
        padding: 0 30px;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgb(0, 0, 0);
    }
.menuButton
    {
        display: none;
    }
@media(max-width: 800px)
    {
        .hideOnMobile
            {
                display: none;
            }
        nav ul
            {
                justify-content: flex-end;
            }
        .menuButton
            {
                display: block;
            }
    }
@media(max-width: 400px)
    {
        .sidebar
            {
                width: 100%;
            }
    }
