#nav-container,
nav,
.toggle {
    margin: 0;
    padding: 0;
}

#nav-container {
    width: 100%;
    height: auto;
    position: sticky;
    top: 0;
    max-width: 100%;
}

nav {
    font-family: 'Merriweather', 'Georgia', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    background-color: var(--accent-color-2);
    color: var(--nav-reverse);
    display: grid;
    grid-template-columns: 1fr;
    justify-items: end;
    z-index: 100;
    width: 100%;
}

nav:after {
    content: "";
    display: table;
    clear: both;
}

nav {

    ul {
        float: right;
        padding: 0.5em 0;
        margin: 0;
        list-style: none;
        position: relative;
    }

    ul li:last-of-type {
        margin-right: 1.5em;
    }

    ul li {
        margin: 0;
        margin-right: 0.5em;
        padding: 0;
        display: inline-block;
    }

    a {
        display: inline-block;
        margin: 0;
        padding: 0.5em 1em;
        color: var(--nav-reverse);
        font-size: 100%;
        text-decoration: none;
    }

    a:link, a:visited {
        color: var(--nav-reverse);
        text-decoration: none;
    }

    a:hover, a:active {
        color: var(--nav-reverse);
        text-decoration: none;
        background-color: var(--hover-2);
        text-decoration: none;
    }

    li>a:after {
        content: none;
    }
}

.toggle,
[id^=drop] {
    display: none;
}

li>a:only-child:after {
    content: '';
}

.nav-sticky {
    margin: 0;
    padding: 0;
    position: sticky;
    top: 0;
    max-width: 100%;
}


@media all and (max-width : 750px) {
    nav {
        justify-items: left;
    }

    .toggle+a,
    .menu {
        display: none;
    }

    .toggle {
        text-align: left;
        display: block;
        background-color: var(--accent-color-2);
        padding: 1.25em;
        color: var(--nav-reverse);
        font-size: 1rem;
        text-decoration: none;
    }

    .toggle:hover {
        background-color: var(--hover-1);
    }

    [id^=drop]:checked+ul {
        display: block;
    }

    nav ul li {
        display: block;
    }

    nav ul {
        padding: 0;
    }

    nav ul .toggle,
    nav ul a {
        text-align: left;
        line-height: 1.5em;
        margin-left: 1.5em;
    }

    nav a:hover {
        background-color: var(--hover-5);
    }

}