@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

$languages: ("python": #3776AB, "js": #F7DF1E, "html": #E34F26, "css": #1572B6, "sass": #CC6699, "php": #777BB4, "sql": #4479A1, "shell": #89E051, "rust": #CE422B)
$os: ("ubuntu": #E95420, "arch": #1793D1, "proxmox": #E57000, "manjaro": #35BF5C, "windows": #0078D6)
.sub_experiance
    padding-left: 0.25rem !important
    position: relative
    color: $white !important

    &::before
        content: ''

        width: 2px
        height: 100%

        position: absolute
        top: 0
        left: 0

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

        opacity: 0.5
        z-index: -1

    @each $lang, $color in $languages
        &.#{$lang}
            &::before
                background-color: $color

    @each $os, $color in $os
        &.#{$os}
            &::before
                background-color: $color

    &.vbad
        &::before
            width: 2px
    &.bad
        &::before
            width: 10%
    &.ok
        &::before
            width: 20%
    &.good
        &::before
            width: 40%
    &.vgood
        &::before
            width: 80%
    &.excellent
        &::before
            width: 100%

    span
        font-size: 0.8rem


@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

    width: 5rem
    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