﻿nav {
    padding: 1rem 0 1.5rem;
}

nav .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav a {
    color: var(--brown);
    font-size: 1.4rem;
    padding: 1.5rem 2rem;
    border-radius: .5rem;
    background-color: var(--white);
    transition: var(--transition-default);
}

nav a:after {
    content: '';
    display: inline-block;
    border-style: solid;
    border-width: .5rem 0 .5rem .6rem;
    border-color:  transparent transparent transparent var(--gold);
    margin-left: .5rem;
}

@media(pointer: fine) {
    nav a:hover {
        color: var(--blue);
        background-color: var(--grey);
    }
}

@media(max-width: 576px) {
    nav svg {
        height: 6rem !important;
        width: auto !important;
    }

    nav a {
        padding: 0;
        font-size: 1.2rem;
        margin-top: 4.8rem;
    }
}