$foregound=#ffffff

menu-item-hover()
    box-shadow: 0 1em 0 -.75em $foregound
    box-sizing: content-box
    transform: translateY(.25em)

nav.main
    font-family: 'Space Mono', monospace
    position: fixed
    top: 0
    left: 0
    z-index: 5
    width: 100vw
    padding: 1.5em
    background: rgb(0,0,0)
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%)

    .left
        color: $foregound
        font-weight: bold
        font-size: 2em
        cursor pointer

    .right
        &>div
            color: $foregound
            padding: .5em 0.75em
            font-weight: bold
            box-sizing: content-box
            cursor pointer
            transition: all ease 100ms

            &:hover
                menu-item-hover()
        
        &:not(:hover)
            &>.active
                menu-item-hover()