.controls {
    line-height:1.15;
    -webkit-text-size-adjust:100%;
    position:absolute;
    top: 0;
    left: 0;
    display:grid;
    grid: auto 8vmin 8vmin 30px / 3vmin 8vmin 46vmin auto 8vmin 8vmin 3vmin;
    grid-template-areas:
        ". . . . . . ."
        ". play time . multiplier fullscreen ."
        ". slider slider slider slider slider ."
        ". . . . . . .";
    width: 100%;
    height: 100%;
    color: white;
    text-align: center;
    text-shadow: black 0px 0 .3vmin;
    user-select: none;
    pointer-events: none;
    font-size: 3.5vmin;
}

.controls > * {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow .2s;
    pointer-events: auto;
}

.play {
    grid-area: play;
}

.hover-circle {
    border-radius: 100%;
    margin: .4vmin;
}
.hover-circle:hover {
    box-shadow: inset 0px 0px 0px 30vmin #000D;
}

.time {
    grid-area: time;
}

.fullscreen {
    grid-area: fullscreen;
}

.slider {
    grid-area: slider;
}

.track {
    width: calc(100% - 3vmin);
    height: 1.6vmin;
    background-color: gray;
    border-radius: 1.6vmin;
    position: relative;
    box-shadow: 0 0 .8vmin 0 #0004;
}

.filled-track {
    width: 0%;
    will-change: width;
    position: absolute;
    background-color: white;
}

.thumb {
    position: relative;
    float:right;
    width: 3vmin;
    height: 3vmin;
    border-radius: 3vmin;
    box-shadow: 0 0 1.5vmin 0 black;
    background-color: white;
    transition: transform .2s;
    top: -.8vmin;
    left: 1.6vmin;
}

.slider:hover .thumb {
    transform: scale(1.4);
}

.multiplier {
    grid-area: multiplier;
}