@import url(https://fonts.googleapis.com/css?family=Questrial&display=swap);
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:rgba(0,0,0,0)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}input[type=range]:focus{outline:none}input[type=range]::-ms-track{width:100%;cursor:pointer;background:rgba(0,0,0,0);border-color:rgba(0,0,0,0);color:rgba(0,0,0,0)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid #000;height:36px;width:16px;border-radius:3px;background:#fff;cursor:pointer;margin-top:-14px;box-shadow:1px 1px 1px #000,0px 0px 1px #0d0d0d}input[type=range]::-moz-range-thumb{box-shadow:1px 1px 1px #000,0px 0px 1px #0d0d0d;border:1px solid #000;height:36px;width:16px;border-radius:3px;background:#fff;cursor:pointer}input[type=range]::-ms-thumb{box-shadow:1px 1px 1px #000,0px 0px 1px #0d0d0d;border:1px solid #000;height:36px;width:16px;border-radius:3px;background:#fff;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{width:100%;height:8.4px;cursor:pointer;box-shadow:1px 1px 1px #000,0px 0px 1px #0d0d0d;background:#3071a9;border-radius:1.3px;border:.2px solid #010101}input[type=range]:focus::-webkit-slider-runnable-track{background:#367ebd}input[type=range]::-moz-range-track{width:100%;height:8.4px;cursor:pointer;box-shadow:1px 1px 1px #000,0px 0px 1px #0d0d0d;background:#3071a9;border-radius:1.3px;border:.2px solid #010101}input[type=range]::-ms-track{width:100%;height:8.4px;cursor:pointer;background:rgba(0,0,0,0);border-color:rgba(0,0,0,0);border-width:16px 0;color:rgba(0,0,0,0)}input[type=range]::-ms-fill-lower{background:#2a6495;border:.2px solid #010101;border-radius:2.6px;box-shadow:1px 1px 1px #000,0px 0px 1px #0d0d0d}input[type=range]:focus::-ms-fill-lower{background:#3071a9}input[type=range]::-ms-fill-upper{background:#3071a9;border:.2px solid #010101;border-radius:2.6px;box-shadow:1px 1px 1px #000,0px 0px 1px #0d0d0d}input[type=range]:focus::-ms-fill-upper{background:#367ebd}*{box-sizing:border-box}body{font-family:"Questrial",sans-serif;background-color:#666;display:flex;flex-direction:column;align-items:center;justify-content:center;max-height:100vh;margin:0}h1{color:#fff}.screen{cursor:pointer;width:60%;background-color:#000 !important;border-top-left-radius:10px;border-top-right-radius:10px}.screen[poster]{object-fit:cover}.controls{background:#333;color:#fff;width:60%;border-bottom-left-radius:10px;border-bottom-right-radius:10px;display:flex;justify-content:center;align-items:center;padding:10px}.controls .btn{border:0;background:rgba(0,0,0,0);cursor:pointer}.controls .fa-play{color:#28a745}.controls .fa-stop{color:#dc3545}.controls .fa-pause{color:#fff}.controls .timestamp{color:#fff;font-weight:bold;margin-left:10px}.btn:focus{outline:0}@media(max-width: 800px){.screen,.controls{width:90%}}