@media (min-width: 1300px)
{
    nav
    {
        display: flex;
        justify-content: end;
        width: 100%;
        position: fixed;
        z-index: 1;
        font-size: 1.5rem;
        background-color: white;
    }
    
    nav a
    {
        padding: 0.5rem;
        margin: auto auto auto 1rem;
        width: 3%;
        cursor: pointer;
    }
    
    nav a img
    {
        padding: 0.5rem;
        margin: auto auto auto 1rem;
        width: 100%;
        cursor: pointer;
    }
    
    nav ul
    {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 3rem;
        margin-right: 2rem;
        list-style-type: none;
    }
    
    nav ul a:hover
    {
        background-color: rgb(233, 191, 106);
        transition: all 0.5s ease;
    }
    
    nav ul a
    {
        /* background-color: white; */
        border-radius: 1rem;
        text-align: center;
    }
}


@media (min-width: 320px) and (max-width: 768px)
{

    nav
    {
        display: flex;
        justify-content: end;
        width: 100%;
        position: fixed;
        z-index: 1;
        background-color: white;
    }

    nav a
    {
        display: flex;
        justify-content: center;
        width: 30%;
    }
    
    nav a img
    {
        padding-left: 1rem;
        margin: auto;
        width: 100%;
    }

    nav ul
    {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
        list-style-type: none;
    }
    
    nav ul a
    {
        background-color: rgb(233, 191, 106);
        transition: all 0.5s ease;
        border-radius: 2rem;
        width: 7rem;
        padding: .1rem;
        font-size: 1.0rem;
    }
}