:root {
    --sp-1: 1px;
    --sp-2: 2px;
    --sp-3: 4px;
    --sp-4: 8px;
    --sp-5: 16px;

    --col-fg: #ffffff;

    --smooth: cubic-bezier(.1, 1, .5, 1);
}

body {
    width: 100%;
    height: 100vh;
    margin: 0;
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1;

    color: var(--col-fg);
    background-color: transparent;

    text-shadow:
    var(--sp-1) var(--sp-1) var(--sp-4) #000,
    var(--sp-1) var(--sp-2) #0008;
}
@supports (font-variation-settings: normal) {
    body { font-family: InterVariable, sans-serif; }
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.justify-center {
    justify-content: center;
}

.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }

.text-ellipses {
    text-overflow: ellipsis;
    overflow-x: clip;
    text-wrap: nowrap;
}

p {
    margin: 0;
}

#music {
    position: fixed;
    left: 0;
    bottom: 0;
    width: min-content;
    padding: 2em;
}

.nowplaying {
    margin-bottom: var(--sp-3);
    text-transform: uppercase;
    opacity: .5;
    font-weight: bold;
}

.artwork {
    width: 80px;
    height: 80px;
    border-radius: var(--sp-3);
    background: #0008;
    box-shadow:
    0 0 var(--sp-5) #000c,
    var(--sp-1) var(--sp-1) var(--sp-2) #0004;
    transition: transform .5s var(--smooth), opacity .5s, filter .5s;
}

.title-artist {
    max-width: calc(100vw - 2em - 80px);
}

.title {
    padding: 0 var(--sp-5);
    font-size: 2em;
    font-weight: 800;
    transition: transform .5s var(--smooth), opacity .1s;
}

.artist {
    padding: 0 var(--sp-5);
    margin-top: calc(0px - var(--sp-3));
    font-size: 1.5em;
    font-weight: 600;
    transition: transform .5s var(--smooth), opacity .1s;
    transition-delay: .05s;
}

#music.paused, #music.switching {
    .artwork {
        transform: scale(0.8);
        opacity: .5;
        filter: grayscale(1);
    }

    .title, .artist {
        transform: translateX(-16px);
        opacity: 0;
    }
}