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

    color: RGB($secondary)

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

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

    > span
        width: 100%

    > ul
        margin: 0
        padding: 0
        height: 3rem
        list-style: none

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

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

            &:hover
                color: RGB($accent)

    > .title
        height: 3rem
        display: flex
        flex-direction: row
        align-items: center
        justify-content: center
        opacity: 0
        transition: opacity 0.1s ease-in-out

        > p
            margin: auto
            font-size: inherit
            color: RGB($secondary)

            > span
                font-family: $monospace-font
                color: RGB($accent)

    &.scrolled
        > .title
            opacity: 1

        &::before
            transform: translateY(0)

@media (max-width: 600px)
    nav
        height: 6rem
        top: -3rem
        display: flex
        flex-direction: column
        justify-content: center

        transition: top 0.2s ease-in-out

        > .title > p
            font-size: 1.3rem

        &.scrolled
            top: 0