@use 'sass:map'

$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

.bar-chart
    margin: 0
    padding: 0

    position: relative
    
    display: flex
    flex-direction: column
    gap: 0.5rem

.marker
    width: 2px
    height: 100%

    position: absolute
    top: 0
    left: 0

    background-color: rgba($white, 0.1)

    z-index: -2

.sub_experiance
    width: 0%
    height: 1.69rem

    position: relative

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

    transition: width 2s cubic-bezier(.86,0,.07,1)

    .fg
        width: 100%
        height: 100%

        position: absolute

        overflow: hidden

        span
            position: absolute
            top: 50%
            left: 1.5rem
            transform: translateY(-50%)

            font-size: 0.9rem
            font-weight: 600
            white-space: nowrap

            color: $black

    .bg
        position: absolute
        top: 50%
        left: 1.5rem
        transform: translateY(-50%)

        font-size: 0.9rem
        font-weight: 600
        white-space: nowrap

        color: $white

        z-index: -1

@keyframes loader
    0%
        width: 0
        left: 0
    30%
        width: 100%
        left: 0
    60%
        width: 100%
        left: 100%
    100%
        width: 100%
        left: 100%

.loader
    margin: 1rem 0

    width: 100%
    height: 2px

    position: relative

    background-color: $black

    overflow: hidden

    &::after
        content: ''

        margin: 0
        padding: 0

        width: 0
        height: 100%

        position: absolute
        top: 0
        left: 0

        background-color: $primary

        animation: loader 1s ease-in-out infinite

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

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

    position: relative

    overflow: hidden

.track-image
    padding: 0px

    // Its too late for me to be bothered to fix a bug I have
    min-width: 5rem
    width: 5rem
    max-width: 5rem
    min-height: 5rem
    height: 5rem
    max-height: 5rem

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

    transition: all 0.3s cubic-bezier(.86,0,.07,1)

    img
        margin: 0
        padding: 0

        width: 100%
        height: 100%

        display: block
        float: left

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

        opacity: 1
        object-fit: cover

        transition: all 0.2s cubic-bezier(.86,0,.07,1)

.track-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.track-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

    .track-image
        width: 2px
        height: auto

        img
            opacity: 0