#main {
    display: block;
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;

    color: var(--fg-color);
    font-family: Nunito, sans-serif;
    font-size: 16px;
}

::-webkit-scrollbar {
    display: none;
}

.loading-screen {
    z-index: 1;
    background-color: var(--bg-color-dark);
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    color: white;
    font-size: 20px;
    font-family: "JetBrains Mono", monospace;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 1s;
    opacity: 1;
}

.loading-screen-text {
    position: absolute;
    bottom: 2em;
}

.loading-screen-spinner {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 8px solid;
    border-color: var(--fg-color) transparent var(--fg-color) transparent;
    background-blend-mode: lighten;
    animation: rotate-animation 1s infinite;
}

@keyframes rotate-animation {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(180deg)
    }
}:root {
    --bg-color-dark:  #222;
    --bg-color-light: #333;

    --medium-color:   #666;
    --fg-color:       #fff;
    --accent-color:   var(--color-cyan);

    --color-red:      #ff6188;
    --color-orange:   #fc9867;
    --color-yellow:   #ffd866;
    --color-green:    #a9dc76;
    --color-cyan:     #78dce8;
    --color-purple:   #ab9df2;

    overflow-x:       hidden;

    background:       var(--bg-color-dark);
    color:            var(--fg-color);
}

*, *::before, *::after {
    box-sizing: border-box;
}

input, button, select, option, textarea {
    color:      inherit;
    font:       inherit;
    background: none;
    border:     none;
    outline:    none;
    margin:     0;
    padding:    0;
}

@font-face {
    font-family: "JetBrains Mono";
    src:         url("https://njonathanj.com/MusicAnalyzer/assets/JetBrainsMono-VariableFont_wght-CzDCK01m.ttf") format("truetype");
}

@font-face {
    font-family: "Nunito";
    src:         url("https://njonathanj.com/MusicAnalyzer/assets/Nunito-VariableFont_wght-D2sADkEI.ttf") format("truetype");
}

@font-face {
    font-family: "Leland";
    src:         url("https://njonathanj.com/MusicAnalyzer/assets/Leland-JhYs4sM8.otf") format("opentype");
}

@font-face {
    font-family: "Leland Text";
    src:         url("https://njonathanj.com/MusicAnalyzer/assets/LelandText-CCI0VAqx.otf") format("opentype");
}#music-analyzer {
    width:           100%;
    max-height:      100%;
    display:         flex;
    flex-direction:  column;
    justify-content: left;

    padding:         .25em;

    > div {
        padding:          .5em;
        margin:           .25em;
        background-color: var(--bg-color-light);
        flex-grow:        0;
        flex-shrink:      0;
    }
}

#spectrum > canvas {
    display:      block;
    width:        100%;
    height:       auto;
    aspect-ratio: 3.5;
}

#waveform {
    > canvas {
        display:    block;
        width:      100%;
        height: 2em;
        border: 1px solid var(--fg-color)
    }
}

#music-analyzer-end {
    display:    block;
    height:     .25em;
    max-height: .25em;
    min-height: .25em;
}#playback-controls {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    row-gap:     .5em;

    > * {
        white-space: nowrap;
    }

    > :not(div.divider):not(:has(+div.divider)):not(:last-child) {
        margin-right: 1.5em;
    }

    > div.divider {
        flex-grow:   0;
        flex-shrink: 0;
        display:     inline-block;
        width:       0;
        height:      1.5em;
        border-left: 1px solid var(--medium-color);
        margin:      0 1em;
    }

    > button {
        display:     flex;
        align-items: center;

        > svg {
            /*
            This is calculated so that the SVGs I am using
            match the style of Nunito font
            */
            height: 1.25em;
        }
    }

    > label {
        display:      flex;
        align-items:  center;
        --text-width: 5em;

        > span:first-child {
            margin-right: .5em;
        }

        > span {
            display:         flex;
            justify-content: end;
            align-items:     center;
        }

        > span:last-child {
            min-width: var(--text-width);
            max-width: var(--text-width);
            width:     var(--text-width);
        }

        > input[type="range"] {
            width:        4.5em;
            accent-color: var(--accent-color);
        }

        > div.select-container {
            text-align:    right;
            position:      relative;
            user-select:   none;
            padding-block: .3em;
            margin-left:   .3em;

            &:has(>.open) {
                outline:        1px solid var(--fg-color);
                outline-offset: -1px;
            }

            &::before {
                content:           "";
                background-color:  var(--fg-color);
                background-repeat: no-repeat;
                mask-image:        url("data:image/svg+xml,%3csvg%20viewBox='-15%20-20%2030%2040'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20fill='none'%20stroke='currentcolor'%20stroke-width='2.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3cpath%20d='M%20-6%20-3%20L%200%203%206%20-3'/%3e%3c/g%3e%3c/svg%3e");
                display:           block;
                width:             0.9375em;
                height:            1.25em;
                position:          absolute;
                left:              .1em;
            }

            span {
                padding-left:  1.05em;
                padding-right: .5em;
            }

            > div > div {
                position:       relative;
                background:     var(--bg-color-light);
                outline:        1px solid var(--fg-color);
                outline-offset: -1px;
                top:            calc(.3em - 1px);

                > span:hover {
                    background: var(--medium-color);
                }
            }
        }
    }
}


#playback-controls-center {
    flex-grow:       1;
    display:         flex;
    justify-content: space-between;
    height:          1.5em;
}

#current-position-display, #fps-display {
    display: flex;

    > span:nth-child(2) {
        display:    inline-block;
        width:      4em;
        min-width:  4em;
        text-align: right;
    }
}


#uploader {
    padding:        .3em;
    padding-inline: .5em;
    outline:        1px solid white;

    flex-grow:      10;
    min-width:      0;
    width:          4em;
    max-width:      fit-content;

    white-space:    nowrap;
    overflow-x:     hidden;
    text-overflow:  ellipsis;

    > input[type="file"] {
        display: none;
    }
}