.focused{background-color:rgba(255,215,0,.1)!important;outline:3px solid gold}*{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0;padding:0}
.container{background:#1a0a2e;background:linear-gradient(135deg,#1a0a2e,#2d1b4e);min-height:100vh;padding:10px .3125rem 20px;position:relative}.list-container{display:block;display:flex;flex-wrap:wrap;gap:1.25rem;-moz-justify-content:center;justify-content:center;padding:.625rem}.list-container>div{flex:1 1 350px;-webkit-flex:1 1 350px;-moz-flex:1 1 350px;-ms-flex:1 1 350px;margin:.625rem}.vid-list .thumbnail{border:3px solid rgba(255,215,0,.3);border-radius:.75rem;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:all .3s ease;width:100%}.vid-list .thumbnail:hover{border-color:gold;box-shadow:0 8px 24px rgba(255,215,0,.4);-webkit-transform:scale(1.05);transform:scale(1.05)}.vid-list .flex-div{-moz-align-items:flex-start;align-items:flex-start;margin-top:10px;padding:.5rem}.vid-list .flex-div img{border:2px solid rgba(255,215,0,.4);border-radius:50%;margin-right:12px;transition:all .3s ease;width:2.5rem}.vid-list .flex-div img:hover{border-color:gold;-webkit-transform:scale(1.1);transform:scale(1.1)}.vid-info{color:#fff;font-family:Poppins,Comic Sans MS,Chalkboard SE,Segoe UI,sans-serif;font-size:.875rem;line-height:1.6}.vid-info a{color:gold;display:block;font-weight:700;margin-bottom:6px;text-decoration:none;transition:all .3s ease}.vid-info a:hover{color:#ffb347;text-shadow:0 0 10px rgba(255,215,0,.5);-webkit-transform:translateX(3px);transform:translateX(3px)}.video-grid{display:block;display:-ms-flexbox;display:grid;-webkit-grid-template-columns:repeat(auto-fill,minmax(280px,1fr));-moz-grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:20px;gap:1.25rem;padding:.625rem;width:100%}.video-card{background:hsla(0,0%,100%,.08);background:#2d1b4e;background:linear-gradient(135deg,rgba(45,27,78,.95),rgba(26,10,46,.9));border:3px solid rgba(255,215,0,.25);border-radius:1rem;box-shadow:0 4px 16px rgba(0,0,0,.3);cursor:pointer;display:block;display:flex;-moz-flex-direction:column;flex-direction:column;overflow:hidden;transition:all .3s ease}.video-card:hover{background:rgba(255,215,0,.15);border-color:gold;box-shadow:0 12px 32px rgba(255,215,0,.35);-webkit-transform:translateY(-6px);transform:translateY(-6px)}.video-card:focus{outline:3px solid gold;outline-offset:3px}.video-card:active{-webkit-transform:translateY(-2px) scale(.98);transform:translateY(-2px) scale(.98)}.video-thumbnail-wrapper{aspect-ratio:16/9;background:rgba(0,0,0,.3);overflow:hidden;padding-top:56.25%;position:relative;width:100%}.video-thumbnail{display:block;height:100%;left:0;object-fit:cover;position:absolute;top:0;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease;width:100%}.video-card:hover .video-thumbnail{-webkit-transform:scale(1.08);transform:scale(1.08)}.video-thumbnail-placeholder{-moz-align-items:center;align-items:center;background:linear-gradient(135deg,rgba(255,215,0,.3),rgba(255,179,71,.3));color:gold;display:flex;font-size:3.5rem;height:100%;-moz-justify-content:center;justify-content:center;left:0;position:absolute;top:0;width:100%}.video-duration-badge{background:rgba(26,10,46,.9);border:2px solid rgba(255,215,0,.4);border-radius:.5rem;bottom:.625rem;box-shadow:0 2px 8px rgba(0,0,0,.4);color:gold;font-size:.75rem;font-weight:700;padding:.25rem .5rem;position:absolute;right:.625rem}.video-card-info{background:rgba(26,10,46,.6);display:block;display:flex;-moz-flex-direction:column;flex-direction:column;gap:.5rem;padding:.75rem .875rem 1rem}.video-card-title{color:#fff;display:-webkit-box;font-family:Poppins,Comic Sans MS,Chalkboard SE,Segoe UI,sans-serif;font-size:.9375rem;font-weight:700;-webkit-line-clamp:2;line-height:1.4;-webkit-box-orient:vertical;overflow:hidden;transition:all .3s ease;word-break:break-word}.video-card:hover .video-card-title{color:gold}.video-card-meta{display:block;display:flex;flex-wrap:wrap;font-size:.75rem;gap:.625rem}.video-card-meta,.video-card-subject{-moz-align-items:center;align-items:center}.video-card-subject{background:rgba(255,215,0,.15);border:2px solid rgba(255,215,0,.3);border-radius:.875rem;color:gold;display:inline-flex;font-weight:700;gap:.375rem;padding:.25rem .625rem;transition:all .3s ease}.video-card:hover .video-card-subject{background:rgba(255,215,0,.25);border-color:gold}.video-card-channel,.video-card-views{color:hsla(0,0%,100%,.7);font-size:.75rem;font-weight:600}.channel-grid{display:block;display:-ms-flexbox;display:grid;-webkit-grid-template-columns:repeat(auto-fill,minmax(210px,1fr));-moz-grid-template-columns:repeat(auto-fill,minmax(210px,1fr));grid-template-columns:repeat(auto-fill,minmax(210px,1fr));grid-gap:20px;gap:1.25rem;padding:.625rem;width:100%}.channel-card{background:rgba(45,27,78,.95);background:linear-gradient(135deg,rgba(45,27,78,.95),rgba(26,10,46,.9));border:3px solid rgba(255,215,0,.25);border-radius:1rem;box-shadow:0 4px 16px rgba(0,0,0,.3);cursor:pointer;display:block;display:flex;-moz-flex-direction:column;flex-direction:column;overflow:hidden;transition:all .3s ease}.channel-card:hover{background:rgba(255,215,0,.15);border-color:gold;box-shadow:0 12px 32px rgba(255,215,0,.35);-webkit-transform:translateY(-6px);transform:translateY(-6px)}.channel-card:focus{outline:3px solid gold;outline-offset:3px}.channel-card:active{-webkit-transform:translateY(-2px) scale(.98);transform:translateY(-2px) scale(.98)}.channel-thumbnail{display:block;object-fit:cover}.channel-thumbnail,.channel-thumbnail-placeholder{border-bottom:3px solid rgba(255,215,0,.3);height:7.375rem;width:100%}.channel-thumbnail-placeholder{-moz-align-items:center;align-items:center;background:linear-gradient(135deg,rgba(255,215,0,.3),rgba(255,179,71,.3));display:flex;font-size:3.5rem;-moz-justify-content:center;justify-content:center}.channel-name{color:#fff;font-family:Poppins,Comic Sans MS,Chalkboard SE,Segoe UI,sans-serif;font-size:.75rem;font-weight:700;line-height:1.4;padding:.625rem;text-align:center;transition:all .3s ease}.channel-card:hover .channel-name{color:gold;text-shadow:0 0 10px rgba(255,215,0,.5)}@media (min-width:480px){.channel-grid,.video-grid{display:block;display:-ms-flexbox;display:grid;grid-gap:20px;gap:1.25rem;padding:.625rem;width:100%}.video-grid{-webkit-grid-template-columns:repeat(auto-fill,minmax(280px,1fr));-moz-grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.channel-grid{-webkit-grid-template-columns:repeat(auto-fill,minmax(210px,1fr));-moz-grid-template-columns:repeat(auto-fill,minmax(210px,1fr));grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.list-container>div{flex:1 1 350px;-webkit-flex:1 1 350px;-moz-flex:1 1 350px;-ms-flex:1 1 350px;margin:.625rem}}@media (max-width:768px) and (min-width:480px){.channel-grid,.video-grid{gap:.9375rem}.video-grid{-webkit-grid-template-columns:repeat(auto-fill,minmax(250px,1fr));-moz-grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.channel-grid{-webkit-grid-template-columns:repeat(auto-fill,minmax(188px,1fr));-moz-grid-template-columns:repeat(auto-fill,minmax(188px,1fr));grid-template-columns:repeat(auto-fill,minmax(188px,1fr))}.list-container>div{flex:1 1 100%;-webkit-flex:1 1 100%;-moz-flex:1 1 100%;-ms-flex:1 1 100%;max-width:100%}.video-card-title{font-size:.875rem}.video-card-info{padding:.625rem .75rem .875rem}.channel-name{font-size:.6875rem;padding:.5625rem}}@media (max-width:479px){.channel-grid,.video-grid{display:block;display:flex;-moz-flex-direction:column;flex-direction:column;gap:.75rem;padding:.3125rem}.list-container{padding:.3125rem}.list-container>div{margin:.3125rem;max-width:100%}.channel-card,.video-card{border-radius:.75rem}.video-card-title{font-size:.8125rem}.video-card-meta{font-size:.6875rem}.channel-name{font-size:.625rem;padding:.5625rem}.channel-thumbnail,.channel-thumbnail-placeholder{height:6.5625rem}}@-webkit-keyframes cardPop{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.03);transform:scale(1.03)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes cardPop{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.03);transform:scale(1.03)}to{-webkit-transform:scale(1);transform:scale(1)}}.channel-card:active,.video-card:active{-webkit-animation:cardPop .3s ease;animation:cardPop .3s ease}