.play-button {
    font-size: 0.7em;
    padding: 0.2em 0.4em;
    margin-left: 0.4em;
    vertical-align: bottom;
}
.play-button::before {
    content: '▶';
}

#video-player {
    display: none;
    gap: 1em;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
#player button { margin-right: .5em;  }
@media (min-width: 1200px) {
    #video-player {
        position: fixed;
        top: auto;
        bottom: 2px;
        left: 2px;
        padding: .5%;
        min-width: 0%;
        max-width: 50%;
        box-sizing: border-box;
        background: #0f11117d;
        border-radius: 8px;
        border: 1px solid var(--faint-contrast);
        z-index: 2;
    }
}

.video-element{
    max-width: 100%;
}

#player-title {
    color: var(--button-text);
    padding: .5em 1em;
    text-decoration: none;
    border-radius: .3em;
    vertical-align: middle;
    text-shadow: 1px 1px 4px rgb(0 0 0 / 70%);
    font-size: 20px;
    font-weight: bold;
    overflow: hidden;
}

/* I don't know why it doesn't work :( */
/* .track-title{
    animation: 5s anim1 infinite linear; 
}

@keyframes anim1 {
    from {
       background-position: 0 0;
    }
    to {
       background-position: -250px 0;
    }
}
*/

#paging, #paging>button {
    box-shadow: 0 0 0.3em 0.3em #0003;
    z-index: 0;
	margin: auto;
}