nav
    padding: 0 0.5rem
    width: 100%
    height: 3rem

    display: flex
    flex-direction: row
    align-items: center

    position: fixed
    top: 0
    left: 0

    font-weight: bold
    font-family: $main-font
    font-size: 1.1rem
    white-space: nowrap

    background: transparent
    color: $primary

    z-index: 100
    transition: color 0.1s ease-in-out

    &::before
        content: ""
        position: absolute
        inset: 0
        background: var(--nav)
        transform: translateY(-100%)
        transition: transform 0.2s ease-in-out
        z-index: -1

    > span
        width: 100%

    > a
        margin: 0 0.75rem
        padding: 0.1rem 0.5rem
        text-decoration: none
        color: inherit
        transition: color 0.1s ease-in-out

        &:hover
            color: $accent

    > h1
        font-size: inherit
        text-decoration: none
        color: $secondary
        opacity: 0
        transition: opacity 0.1s ease-in-out

        > span
            font-family: $monospace-font
            color: $accent

    &.scrolled
        color: $secondary

        > h1
            opacity: 1

        &::before
            transform: translateY(0)