div.riplayer-base canvas,
div.riplayer-base video {
    margin: auto;
    width: var(--width);
    height: var(--height);
}
div.riplayer-base canvas {
    transform: scale();
    z-index: -8;
}
div.riplayer {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
div.riplayer.hide-controls {
    cursor: none;
}
nav.riplayer-controls {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 32px 8px 0px 8px;
    transition: 0.25s opacity;
}
div.riplayer.hide-controls nav.riplayer-controls {
    opacity: 0;
    pointer-events: none;
}
nav.riplayer-controls button {
    padding: 16px;
}
nav.riplayer-controls div.time-controls {
    position: absolute;
    top: 0px;
    left: 8px;
    right: 8px;
    gap: 8px;
}
nav.riplayer-controls div.time-bar {
    height: 8px;
    margin: 8px;
    background-color: #00000040;
}
nav.riplayer-controls div.time-bar div {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(var(--accent), 0.75);
}
nav.riplayer-controls input.time-range {
    color: rgb(var(--accent));
    position: absolute;
    top: 8px;
    left: 0px;
    right: 0px;
    width: auto;
    background-color: #80808000;
}