body {
    background: #000;
    color: #ccc;
    padding: 20pt 0pt;
    font-family: sans-serif;
    margin: 0;
}
footer a {
    color: #555;
    text-decoration: none;
}

.content-wrapper {
    max-width: 560px;
    margin: 0 auto;
}

#youtube {
    border-radius: 5pt;
    max-width: 100%;
}

#playlist {
    display: flex;
    flex-direction: column;
    gap: 0pt;
    padding: 0;
    text-align: left;
}

.playlist__item {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2pt;
    cursor: pointer;
    padding: 3pt 5pt 3pt 8pt;
}

.playlist__item:hover {
    background-color: #312;
}

.playlist__item.playing {
    background-color: #a2104a;
}

.playlist__item img {
    height: 3em;
    margin-right: 8pt;
}

.playlist__item-label {
    text-overflow: ellipsis;
    overflow: hidden;
    text-wrap: nowrap;
}

.controls {
    border-bottom: 1pt solid #a2104a;
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-bottom: 10pt;
}
.controls button {
    min-width: 30pt;
    padding: 4pt;
    margin: 4pt 0 0 0;
    border: 1pt solid #a2104a;
    border-left: 3pt solid #a2104a;
    border-bottom: 0px hidden black;
    background-color: #222;
    color: #fff;
}
.controlbuttonimage {
    width: 1em;
    height: 1em;
}
.controls button:last-of-type {
    border-radius: 0 5pt 0 0;
}
.controls button:first-of-type {
    border-radius: 5pt 0 0 0;
}
.controls button:hover {
    padding-top: 6pt;
    padding-bottom: 4pt;
    margin-top: 0;
    margin-bottom: 0;
}
.controls button:active {
    padding-top: 2pt;
    margin-top: 6pt;
}

.controls .player-pause-button-state.playing .play-button {
    display: none;
}

.controls .player-pause-button-state.paused .pause-button {
    display: none;
}

.hidden {
    display: none;
}