.player-container {
    display: flex;
    max-width: 1200px;
    gap: 20px;
    width: 50%;
}

#player-column-left {
    flex: 1;
    text-align: right;
}

#player-column-right {
    flex: 2;
}

/* Customization of the player list */
.player-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.player-column li {
    border-top: 1px solid currentColor;
    padding: 10px 0;
}

.button-play {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    cursor: pointer;
    flex-direction: column;
}

.button-play img {
    display: none;
}

.button-play::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-image: url(../images/play-icon.svg);
    mask-image: url(../images/play-icon.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.button-play.playing::before {
    -webkit-mask-image: none;
    mask-image: none;
    background-color: transparent;
    background-image: 
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 4px 60%, 4px 60%, 4px 60%;
    background-position: 0 100%, 50% 100%, 100% 100%;
    animation: equalizer 1s infinite ease-in-out alternate;
}

@keyframes equalizer {
    0% { background-size: 4px 60%, 4px 30%, 4px 90%; }
    50% { background-size: 4px 30%, 4px 100%, 4px 50%; }
    100% { background-size: 4px 90%, 4px 50%, 4px 70%; }
}

.button-play p {
    margin: 0;
}

.button-play p:not(.player-title) {
    font-style: italic;
    font-size: 0.8em;
}

@media screen and (min-width: 769px) {
    .button-play {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .button-play p:not(.player-title) {
        flex-basis: 100%;
    }
}

@media screen and (max-width: 768px) {
    .player-container {
        flex-direction: column;
        width: 90%;
    }

    #player-column-left {
        text-align: center;
    }
}