body{margin:0;font-family:Arial;background:#171c30}.HomeLayout{display:flex;margin:0 auto;min-height:100vh}.Media{cursor:pointer;margin-right:15px;display:inline-block;width:260px;vertical-align:top}.Media:hover .Media-cover{box-shadow:0 0 10px rgba(0,0,0,.3)}.Media-cover{transition:.3s;box-shadow:0 0 5px rgba(0,0,0,.3);height:160px}.Media-image{object-fit:cover}.Media-title{margin:5px 0 0;color:#44546b;white-space:normal}.Media-author{font-size:12px;margin:5px 0 0}.Playlist{overflow-x:auto;white-space:nowrap;overflow-y:hidden;padding-bottom:80px}.Category{margin-bottom:1em}.Category-title{text-transform:uppercase;font-size:20px;color:#3f546c;margin:0 0 20px;letter-spacing:2px;font-weight:700}.Category-description{color:#888b8e;font-weight:300;margin:0;font-size:14px}.Search{max-width:400px;margin-bottom:20px}.Search-input{background:#f2f2f2;padding:20px;font-size:18px;font-family:Arial;width:100%;border-radius:10px;border:none;outline:0;transition:.2s;box-shadow:2px 2px 5px rgba(0,0,0,.2)}.Search-input:focus{box-shadow:0 0 10px rgba(0,0,0,.5)}.Categories{overflow:hidden;padding:20px 0 20px 20px;background:#fff}.Related,.Related-img{width:300px}.Modal{max-width:768px;width:100%;margin:0 auto;position:fixed;left:0;right:0;top:100px;background:#fff;padding:20px;border-radius:20px;box-shadow:0 0 10px rgba(0,0,0,.4)}.Modal-close{width:50px;height:50px;position:absolute;right:-25px;top:-25px;border-radius:50%;border:none;background:#171c30;color:#fff;cursor:pointer}.Modal-close:after{content:"X";font-weight:700;font-size:30px}.VideoPlayer{width:100%;position:relative;background:#000}.Video,.Video video{width:inherit}.Video video{vertical-align:middle}.Title{position:absolute;top:20px;left:20px;background:rgba(0,0,0,.5);color:#fff;padding:10px 20px}.Title h2{margin:0;font-size:16px;font-weight:400}.PlayPause{width:50px;height:50px}.PlayPause button{height:inherit;border:none;background:transparent;outline:0;width:inherit;box-sizing:none;font-size:30px;cursor:pointer;padding:0}.Timer{font-size:14px;color:#fff;padding:0 10px 0 0;display:flex;align-items:center}.Timer p{margin:0}.VideoPlayerControls{display:flex;position:absolute;background:rgba(0,0,0,.7);bottom:10px;left:10px;right:10px;z-index:2;border-radius:20px;padding:0 10px}.ProgressBar{display:flex;flex:1;align-items:center}.ProgressBar input{width:100%}.Spinner{position:absolute;top:0;bottom:50px;left:0;right:0;display:flex;align-items:center;justify-content:center}.Spinner span{color:#fff;font-size:20px}.Volume{display:flex;align-items:center;padding:0 15px;border:none;background:transparent;cursor:pointer;outline:0;position:relative}.Volume-range{transform:rotate(-90deg);transform-origin:left bottom;position:absolute;bottom:50px;left:50px;height:50px;display:none;background:rgba(0,0,0,.7);padding-right:20px;border-radius:0 20px 20px 0}.Volume input{cursor:grab;background:blue;border:1px solid blue}.Volume:hover .Volume-range{display:flex}.FullScreen{align-items:center;display:flex;padding:0 10px;cursor:pointer}