.nav__list{
    display: flex;
    justify-content: center;

    background:  rgba(230, 230, 230, 0.2);

    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__item{
    display: block;
}

.nav__link{
    display: block;
    text-decoration: none;
    padding: 1rem;
    color: lavender;
}

.nav__link:hover{
    background-color: royalblue;
}

.active{
    background-color: royalblue;

}

.mobile__nav{
    display: none;
}

.mobile__nav__list{
    display: none;
}


@media only screen and (max-width: 48em) {

    .mobile__nav{
        display: block;
        text-align: right;
    }

    .nav__link{
        padding-right: 2rem;
    }

    .nav__button{
        border: none;
        background-color: transparent;
        font-size: 2rem;
        color: lavender;
        padding-right: 2rem;
    }

    .nav__button:hover{
        color: black;
        cursor: pointer;
    }

    .desktop__nav{
        display: none;
    }
}