nav{
    display: block;
}

nav > ul{

    display: flex;
    list-style:none;
    margin-left:0;
    text-align: center;
}

nav.left > ul{
    justify-content: flex-start;
}

nav.right > ul{
    justify-content: flex-end;
}

nav.center > ul{
    justify-content: center;
}

nav.full > ul > li{
    flex:1;
}



nav > ul > li > a {
    padding: 1.2rem;
    display: block;
    text-decoration: none;
    color: var(--color-light);
    font-size: 1.1rem;
    font-weight:bold;
    border-bottom: 5px solid transparent;
}

nav > ul > li > a:hover {
border-bottom: 5px solid var(--color-link);
}




@media (max-width: 700px) {
    nav > ul {
        flex-direction: column;
    }
}