@import"https://fonts.googleapis.com/css2?family=Audiowide&display=swap";*{margin:0;padding:0;border:none;box-sizing:border-box}body{padding:40px 0;font-family:"Audiowide",cursive;background-color:#333}a{text-decoration:none}ul,ol{margin:0;list-style-type:none}h1{margin-bottom:20px;text-align:center;color:#fff;text-shadow:0 0 8px #0064b4}img{max-width:100%;height:auto}video{width:100%;height:auto}span{text-shadow:0 0 8px #0064b4;font-size:.75rem}progress{width:100%;box-shadow:0 0 8px #0064b4;border-radius:8px;cursor:pointer}::-webkit-progress-bar{border-radius:8px;background-color:#fff;color:#0064b4}progress::-webkit-progress-value{border-radius:8px;background:#0064b4}.btn{width:40px;height:40px;padding:10px;border-radius:50%;outline:none;background-color:#ebebeb;box-shadow:0 0 8px #0064b4;cursor:pointer}.btn:hover,.btn:active{border:2px solid #0064b4;box-shadow:0 0 4px #0064b4}.btn:active>svg{fill:#7c7c7c}.btn svg{width:20px;height:20px;fill:#0064b4;transition:fill .25s ease;pointer-events:none}main{width:100vw;height:80vh;display:flex}aside.playlist{height:80vh;padding:10px;flex:0 1 15vw;align-self:flex-end;order:2;background:linear-gradient(#9e9e9e, #868686)}aside.playlist ul#videoList li img{-o-object-fit:cover;object-fit:cover;border:2px solid #0064b4;filter:brightness(0.4);transition:filter .3s ease-in-out}aside.playlist ul#videoList li img:hover,aside.playlist ul#videoList li img:active,aside.playlist ul#videoList li img.selected{box-shadow:0 0 8px #0064b4;filter:brightness(1)}section.player{flex:0 1 85vw;order:1;display:flex;flex-direction:column;justify-content:center;align-items:center}section.player video{width:60%;display:block;background-color:#000}section.player div#controls{width:60%;height:70px;padding:10px;display:flex;gap:20px;justify-content:space-between;align-items:center;background:linear-gradient(#797979, #1f1f1f)}section.player div#controls .play-controls{flex:1;display:flex;justify-content:space-between}section.player div#controls .progress-display{flex:1;display:flex;flex-direction:column}section.player div#controls .progress-display .progress-times{display:flex;justify-content:space-between;color:#fff}section.player div#controls .volume-controls{flex:1;display:flex;justify-content:space-evenly;align-items:center;gap:10px}section.player div#controls .volume-controls .btn svg.volOff{display:none}section.player div#controls .volume-controls .btn.muted svg.volOff{display:inline-block}section.player div#controls .volume-controls .btn.muted svg.volOn{display:none}section.player div#controls .volume-controls span#volNumber{color:#fff}section.player div#controls .volume-controls input#adjustVol{box-shadow:0 0 8px #0064b4;cursor:pointer}section.player div.video-info p{margin-top:1rem;font-size:1.2rem;text-shadow:0 0 8px #0064b4;color:#fff}section.player div.video-info p span{font-size:1rem;text-shadow:none}section.player div.video-info p span.symbolic{margin:0 20px;font-size:1.2rem;text-shadow:0 0 8px #0064b4}