:root {
    --plyr-color-main: #457B9D;
    --plyr-font-size-time: 16px;
    --plyr-control-icon-size: 29px;
    --plyr-control-spacing: 6px;
    --plyr-control-padding: 5px;
    --plyr-range-track-height: 10px;
}

.plyr--audio .plyr__controls {
    border-radius: 3px;
    padding-bottom: 0 !important;
}

.card:hover, .card:hover div.plyr__controls {
    background-color: #FAF8F7;
}

@media (prefers-color-scheme: dark) {
    :root {
        --plyr-color-main: #457B9D;
        --plyr-audio-control-color: #A9C7B9;
    }

    .card, .card div.plyr__controls {
        background-color: #0D272F;
    }

    .card:hover, .card:hover div.plyr__controls {
        background-color: #091B20;
    }
}