@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#frame {
    gap: 0;
}

#main {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    margin-left: 0;
    gap: var(--gap-big);
}

hgroup {
    margin-left: 4ex;
}

#song {
    margin: 2ex 0 0;
    font-size: 25pt;
}

#artist {
    margin: 0 0 2ex;
}

#vinyl {
    align-self: center;
    height: 40ex;
    width: 40ex;
    margin-left: 0ex;
}

#vinyl img {
    width: 100%;
    height: 100%;
}

#vinyl.spinning img {
    animation: spin 4s infinite linear;
}

#playlist {
    border-radius: var(--gap-small);
    flex: 1;
    margin-left: 8ex;
}

#playlist > div {
    padding: var(--gap-small);
    clear: both;
    padding-bottom: 3ex;
}

#playlist > div > dt {
    font-weight: bold;
}

#playlist > div:after {
    content: ".";
    visibility: hidden;
    clear: both;
}

#playlist > div:before {
    content: "Now playing";
    font-weight: bold;
    visibility: hidden;
    writing-mode: sideways-lr;
    float: left;
    padding: 1ex var(--gap-big) 1ex var(--gap-small);
    font-size: small;
}

#playlist > div.playing {
    background-color: brown;
    color: white;
}

#playlist > div.playing:before {
    visibility: visible;
}

#playlist > div > dt > img {
    width: 10ex;
    float: left;
    margin-right: var(--gap-small);
}