:root {
    --ticker-width: 600px;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background: #888;
}

#music-ticker {
    /* width: fit-content; */
    max-width: var(--ticker-width);
    margin: 32px;
    padding: 8px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    border-radius: 8px;

    &.outline {
        border: 1px solid white;
        outline: 1px solid black;
    }

    .artwork-container {
        width: 64px;
        min-width: 64px;
        height: 64px;
        border-radius: 4px;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }
    }

    #metadata {
        min-width: 0;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #fff;
        text-shadow: 1px 1px 0 #000a;
        overflow-x: clip;
    }

    h1 {
        width: fit-content;
        min-width: 0;
        margin: -2px 0;
        overflow-x: hidden;
        white-space: nowrap;
        font-size: 30px;
    }

    p {
        width: fit-content;
        min-width: 0;
        margin: -2px 0;
        overflow-x: hidden;
        white-space: nowrap;
        font-size: 22px;
        font-weight: 600;
        opacity: .75;
    }

    .marquee {
        animation: 20s ease-in-out infinite marquee;
    }
}

@keyframes marquee {
    20% {
        transform: translateX(0);
    }
    60% {
        transform: translateX(calc(-100% + var(--ticker-width) - 74px));
    }
    80% {
        transform: translateX(calc(-100% + var(--ticker-width) - 74px));
    }
}