:root {
    --play-background-color-top: #ecfffe;
    --play-background-color-bottom: #f4ffd1;
    --play-background: linear-gradient(
        var(--play-background-color-top) 30%,
        var(--play-background-color-bottom)
    );
    --playing-mark: "▶";
}
#audio_box {
    position: fixed;
    left: 0;
    bottom: 0;
    margin: 30px;
    z-index: 1000;
}
#audio_background {
    overflow: hidden;
    opacity: 0;
    position: fixed;
    background-attachment: fixed;
    z-index: -9998;
    transition: opacity 1s;
    width: 100%;
    height: 100vh;
    background: var(--play-background);
}
.audio_play body::-webkit-scrollbar-track {
    background: var(--play-background);
}
.audio_play #audio_background {
    opacity: 1;
}
.audio.button {
    opacity: 0.75;
}
.audio.button svg {
    margin-top: 6px;
    display: flex;
}
.audio.play > *:not(:first-child) {
    position: absolute;
    left: 0;
    top: 0;
}
.audio.play .pause {
    visibility: hidden;
}
.audio_play .playing .audio.play .pause {
    visibility: visible;
}
.audio_play .playing .audio.play .play {
    visibility: hidden;
}
.playlist .playing::before {
    content: "";
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left: 8px solid var(--main-color-pale);
    transform: translate(0, -50%);
    position: absolute;
    font-size: 1.2em;
    left: 5%;
    top: 50%;
    transition: border-left-color 2s;
}
.audio.button .loop {
    opacity: 0.5;
}
.audio_loop .audio.button .loop {
    opacity: 1;
}
header .background {
    transition: background-color 2s;
}
.audio_play header .background {
    background-color: var(--play-background-color-top);
}
@media screen and (max-width: 640px) {
    #audio_box {
        margin: 10px;
    }
}
ul.playlist {
    display: flex;
    padding: 0;
    margin: 18px 5%;
    flex-wrap: wrap;
}
ul.playlist li {
    display: block;
    float: left;
    margin: 0;
    padding: 0.5% 1%;
    padding-left: 5%;
    padding-right: 8%;
    position: relative;
    width: 37%;
    height: 4em;
    border-radius: 4px;
    transition: background-color 100ms;
}
ul.playlist li:hover {
    background-color: var(--main-color-fluo);
}
ul.playlist li.playing:hover::before {
    border-left-color: var(--main-color-soft);
}
ul.playlist .title {
    display: table;
    width: 100%;
    height: 100%;
}
ul.playlist .title h3 {
    display: table-cell;
    vertical-align: middle;
    color: var(--main-color);
    font-size: 1.4em;
    line-height: 1.2em;
    font-family: "Zen Maru Gothic", sans-serif;
}
ul.playlist li > .play {
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translate(0, -50%);
}
@media screen and (max-width: 800px) {
    ul.playlist h3 {
        font-size: 1.2em;
    }
    ul.playlist {
        margin: 18px 2%;
    }
    ul.playlist .play svg {
        height: 32px;
        width: 32px;
    }
    ul.playlist li {
        padding-right: 12%;
        padding-left: 8%;
        width: 80%;
    }
    .playlist .playing::before {
        left: 3%;
    }
}