html, body {margin: 0; padding: 0;}
body {position: relative; overflow: hidden; font-family: Arial; color: #FFF; background: #000; height: 100vh;}
#video-player {width: 100%;height: 100%;}
#controls {position: absolute;bottom: 0;left: 0;width: 96%;background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); padding: 1% 2%;}
#play-pause {user-select: none; pointer-events: none;}
#play-pause .btn-play, #play-pause .btn-pause {display: flex ; align-items: center; justify-content: center; position: absolute; left: 40%; width: 20%; top: 40%; height: 20%;}
#play-pause[data-status="play"] .btn-play img {height: 0 !important;}
#play-pause[data-status="pause"] .btn-pause img {height: 0 !important;}
#play-pause img {transition: height 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); height: 60%; max-width: 100%; max-height: 100%;}
#seek-bar {flex-grow: 1;margin: 0;height: 5px;background: #FFF;outline: none; width: 100%; accent-color:#f03;}
#seek-bar::-webkit-slider-thumb {-webkit-appearance: none;width: 12px;height: 12px;background: #f03;border-radius: 50%;cursor: pointer;}
#seek-bar::-moz-range-thumb {width: 12px;height: 12px;background: #f03;border-radius: 50%;cursor: pointer;}
#current-time,#duration {color: white;font-size: 14px;}
#fullscreen {cursor: pointer;}
body[data-status="start"] #controls {display: none;}
body[data-status="start"] #play-pause .btn-play img {height: 50%; opacity: 0.85;}
body[data-status="start"] #play-pause .btn-pause img {height: 0;}
body[data-status="play"] #play-pause img {height: 0;}
body[data-status="playing"] #play-pause .btn-pause img {height: 100%;}
body[data-status="pausing"] #play-pause .btn-play img {height: 100%;}
body[data-status="play"] #controls {display: none;}
body[data-status="play"]:hover #controls {/*display: block;*/}