nav
    padding-left: 1rem
    padding-right: 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($primary)
    // border-bottom: 1px solid RGB($primary)

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

    &::before
        content: ""
        position: absolute
        inset: 0
        background: RGB(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
        > p
            margin: auto
            font-size: inherit
            color: inherit
            transition: color 0.1s ease-in-out
            > span
                font-family: $monospace-font
                color: RGB($accent)

    &.scrolled
        color: RGB($secondary)
        &::before
            transform: translateY(0)

@media (max-width: 600px)
    nav
        padding-right: 1rem
        height: 6rem
        top: -3rem
        display: flex
        flex-direction: column
        justify-content: center
        transition: top 0.2s ease-in-out

        > .title
            opacity: 1
            > p
                font-size: 1.3rem

        &.scrolled
            top: 0