$black: #101010
$dark: #151515
$grey: #808080
$white: #e8e3e3
$primary: #8C977D

@font-face
    font-family: 'jetbrains_monoitalic'
    src: url('../fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff2') format('woff2'), url('../fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff') format('woff')
    font-weight: normal
    font-style: normal
    font-display: swap
@font-face
    font-family: 'jetbrains_monoregular'
    src: url('../fonts/jetbrainsmono-variablefont_wght-webfont.woff2') format('woff2'), url('../fonts/jetbrainsmono-variablefont_wght-webfont.woff') format('woff')
    font-weight: normal
    font-style: normal
    font-display: swap

html
    margin: 0
    padding: 0
body
    margin: 0
    padding: 3rem 1rem 1rem
    width: 100vw
    min-height: 100vh

    background-color: $black

    font-family: 'jetbrains_monoregular', sans-serif

    display: flex
    justify-content: center
    align-items: center

    overflow-x: hidden
    box-sizing: border-box

    *
        box-sizing: border-box
    
nav
    margin: 0
    padding: 0.5rem 1rem

    width: 100vw
    height: 3rem

    position: fixed
    top: 0
    left: 0

    display: flex
    justify-content: center
    align-items: center
    gap: 1rem

    z-index: 1

    color: $white

    a
        margin: 0
        padding: 0

        width: auto
        height: 2rem

        position: relative

        display: flex
        justify-content: center
        align-items: center

        font-size: 1.1rem
        font-weight: 400
        line-height: 1

        text-align: left
        text-decoration: none
        text-transform: uppercase

        color: $grey

        &:hover
            color: $white

    a.selected
        color: $primary

        &:hover
            color: $white

    span
        margin: 0 0 0.2rem 0
        padding: 0

        width: 2px
        height: 1.25rem

        position: relative

        display: flex
        justify-content: center
        align-items: center

        background-color: $grey

.wrapper
    margin: 0 auto
    padding: 1rem

    width: 100%
    max-width: 621px

    min-height: auto

    position: relative

    display: flex
    flex-direction: column
    gap: 1rem

    background: $dark
    color: $white
    border-radius: 2px

    z-index: 2
    box-sizing: border-box
    overflow: hidden

    h1
        margin: 0 // 0 1rem 0
        padding: 0

        font-size: 2.25rem
        font-weight: 600
        line-height: 1

        text-align: left
        text-transform: uppercase
        white-space: break-spaces

    h2
        margin: 0
        padding: 0

        font-size: 1.5rem
        font-weight: 600
        line-height: 1

        text-align: left
        text-transform: uppercase

    h3
        margin: 0
        padding: 0

        font-size: 1.25rem
        font-weight: 600
        line-height: 1

        text-align: left
        text-transform: uppercase

    p
        margin: 0
        padding: 0

        font-size: 1.1rem
        font-weight: 400
        line-height: 1.2

        text-align: left

        color: $grey

    a
        margin: 0
        padding: 0

        font-size: 1.1rem
        font-weight: 400
        line-height: 1.2

        text-align: left

        color: $primary

        &:hover
            color: $white

    img
        margin: 0 auto
        padding: 0

        width: auto
        max-width: 100%

        position: relative

        display: block

        border-radius: 2px

        object-fit: cover

        z-index: 1

p.subtitle
    color: $white
    text-transform: uppercase

.content
    display: flex
    flex-direction: column
    justify-content: space-between
    gap: 0.5rem

    overflow: hidden

.music
    display: flex
    flex-direction: row
    gap: 1rem

    overflow: hidden

.music-image
    width: 5rem
    height: 5rem

    border-radius: 2px
    background-color: $black

    img
        margin: 0
        padding: 0

        width: 5rem
        height: 5rem

        display: block
        float: left

        border-radius: 2px
        background-color: $dark

        object-fit: cover

.music-info
    display: flex
    flex-direction: column
    //justify-content: space-between
    gap: 0.5rem

    overflow: hidden

    a
        margin: 0
        padding: 0

        font-size: 1.1rem
        font-weight: 600
        line-height: 1.2

        text-align: left
        text-decoration: none

        color: $white

        &:hover
            color: $primary

p.music-nowplaying
    color: $primary


@import "buttons"
@import "toast"

@media (max-width: 669px)
    .wrapper
        max-width: 100%
        border-radius: 0

        h1
            font-size: 2rem
            text-align: center

    p.subtitle
        text-align: center

    .music
        padding-left: 0.5rem
        border-left: 2px solid $primary

        span, img
            display: none