:root{--paletteColor1:#000;--paletteColor2:#fff;--paletteColor3:#161619;--paletteColor4:#e21221;--paletteColor5:#fad0c4;--paletteColor6:#ffd1ff;--paletteColor7:#3a1c71;--paletteColor8:#d76d77;--paletteColor9:#ffaf7b;--paletteColor10:#f1c40f;--paletteColor11:#ff7a69;--filledProgressBar:0%;--backgroundFontSize:6vw;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;display:flex;min-height:100vh;background:linear-gradient(200deg,#161619,#3a1c71,#fad0c4);background:linear-gradient(200deg,var(--paletteColor3),var(--paletteColor7),var(--paletteColor5));background-size:cover;align-items:center;justify-content:center}body .player{max-width:750px;border:2px solid rgba(0,0,0,.2);box-shadow:0 0 20px rgba(0,0,0,.2);position:relative;overflow:hidden;z-index:1}body .player video{width:100%}body .player .controls{display:flex;position:absolute;bottom:0;width:100%;transform:translateY(100%) translateY(-5px);transition:all .3s;flex-wrap:wrap;background:rgba(0,0,0,.1)}body .player .controls .progress{position:relative;display:flex;flex-basis:100%;height:5px;transition:height .3s;background:rgba(0,0,0,.5);cursor:pointer}body .player .controls .progress .filled{background:#e21221;background:var(--paletteColor4);flex-basis:0%;flex-basis:var(--filledProgressBar)}body .player .controls button{background:none;border:0;line-height:1;color:#fff;text-align:center;outline:0;padding:0;cursor:pointer;max-width:50px;transition:color .3s ease-in-out}body .player .controls button::-moz-selection{background-color:transparent;color:#fff}body .player .controls button::selection{background-color:transparent;color:#fff}body .player .controls button:hover{color:#e21221;color:var(--paletteColor4)}body .player:hover .controls{transform:translateY(0)}body .player:hover .controls .progress{height:15px}@media (max-width:414px),(min-width:415px) and (max-width:667px){body{--backgroundFontSize:42px;padding:0 5px}body:before{top:25px}body:after{bottom:25px}}@media (min-width:415px) and (max-width:667px){body{--backgroundFontSize:54px}}.controls>*{flex:1}input[type=range]{height:30px;-webkit-appearance:none;background:transparent;width:100%;margin:0 5px}input[type=range]:hover{outline:none;background:transparent}input[type=range]:hover::-webkit-slider-runnable-track{transition:background 1s ease;background:#ff7a69;background:var(--paletteColor11)}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:8.4px;background:hsla(0,0%,100%,.8);border-radius:1.3px;border:.2px solid rgba(1,1,1,0)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:15px;width:15px;border-radius:50px;background:#e21221;background:var(--paletteColor4);cursor:pointer;margin-top:-3.5px;box-shadow:0 0 2px rgba(0,0,0,.2)}input[type=range]::-moz-range-track{width:100%;height:8.4px;cursor:pointer;box-shadow:1px 1px 1px transparent,0 0 1px rgba(13,13,13,0);background:#fff;background:var(--paletteColor2);border-radius:1.3px;border:.2px solid rgba(1,1,1,0)}input[type=range]::-moz-range-thumb{box-shadow:0 0 0 transparent,0 0 0 rgba(13,13,13,0);height:15px;width:15px;border-radius:50px;background:#e21221;background:var(--paletteColor4);cursor:pointer}