.app{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}header{display:flex;height:var(--header-height);align-items:center;width:100%}header .sec-1{flex:.5}header .sec-1 h1{margin:0}header .sec-2{flex:.5;display:flex;justify-content:flex-end}@media screen and (max-width: 768px){header{display:flex;width:100%}header .sec-1{display:flex;flex:.9;width:100%;margin:0}header .sec-1 h1{width:100%;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}header .sec-2{flex:.1}}button{display:inline-block;padding:5px 20px;font-size:1em;text-align:center;text-decoration:none;border-radius:5px;color:var(--text-color);background-color:var(--secondary-color);border:2px solid var(--secondary-color);transition:background-color .3s,color .3s,transform .3s;cursor:pointer;overflow:hidden}button:hover{background-color:var(--secondary-color);border-color:var(--secondary-color);color:#fff}button :active{transform:scale(.95)}.video-card{height:100%;display:flex;flex-direction:column;justify-content:space-between;background-color:#fff;border-radius:10px;box-shadow:0 0 10px #0000001a;margin:10px;width:20%;height:365px;min-width:150px;overflow:hidden;cursor:pointer;transition:all .5s ease-in-out}.video-card .thumbnail{width:100%;height:300px}.video-card .thumbnail img{width:100%;height:100%;top:0;object-fit:cover}.video-card .details{color:#000;width:100%}.video-card .details h2{width:100%;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding:0}.video-card .details p{margin:0;padding:0 10px}.playarea-close{position:absolute;top:10px;right:10px;background-color:transparent;border:none;color:#fff;font-size:2rem;cursor:pointer}.playarea-close svg{height:30px;width:30px}.play-area{scale:0;display:flex;justify-content:center;align-items:center;height:90%;width:90%;background-color:#000000e6;position:fixed;top:5%;left:5%;z-index:0;transition:all .5s ease-in-out;border-radius:1em;overflow:hidden}.play-area-full{scale:1;display:flex;justify-content:center;align-items:center;height:90%;width:90%;background-color:#000000e6;position:fixed;top:5%;left:5%;z-index:2;transition:all .5s ease-in-out;border-radius:1em;overflow:hidden}@media only screen and (max-width: 768px){.video-card{scale:.9;margin:0;width:150px}}.video-details{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;text-align:start}.video-details .video-img{width:100%;height:60%;position:relative}.video-details .video-img img{position:absolute;top:0;width:100%;height:100%;object-fit:cover}.video-details .details{width:100%;color:var(--primary-color);width:80%}.video-details .details h2{width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;color:var(--primary-color);margin:0;padding:0}.video-details .details p{margin:10px 0 0}.video-series-details{width:100%;height:100%;overflow:scroll;display:flex;flex-direction:column;align-items:center}.video-series-details .video-img{width:100%;height:60%;position:relative}.video-series-details .video-img img{position:absolute;top:0;width:100%;height:100%;object-fit:cover}.video-series-details .details{color:var(--primary-color);width:90%}.video-series-details .details h2{width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;color:var(--primary-color);margin:10px 0 0;padding:0}.video-series-details .details p{margin:0}.video-series-details .seasons-container{width:90%;display:flex;flex-wrap:wrap;justify-content:space-between;flex-direction:row}.video-series-details .seasons-container .episodes{display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.video-series-details .seasons-container .episodes h2{margin:0 10px;color:#fff}.video-series-details .seasons-container .episodes .episode{margin:10px}.video-series-details .seasons-container .episodes .episode button{background-color:var(--primary-color);color:#000;border:none;padding:10px 20px;cursor:pointer;transition:all .3s ease-in-out}.video-series-details .seasons-container .episodes .episode button:hover{background-color:gray}@media only screen and (max-width: 768px){.seasons-container{margin:0;padding:0}.seasons-container .episodes{flex-direction:row;align-items:center;justify-content:center}.seasons-container .episodes h2,.seasons-container .episodes .episode{margin:0;padding:0}}.outer-container h2{margin:0 10px}.video-container{display:flex;flex-wrap:wrap;justify-content:space-evenly;margin:10px}#play-btn{cursor:pointer;z-index:5;position:absolute;top:20%;transform:translateY(100%)}#play-btn svg{height:70px;width:70px;fill:#fff}#close-btn{position:absolute;top:10px;right:10px;background-color:transparent;border:none;color:#fff;font-size:2rem;cursor:pointer;z-index:11}#close-btn svg{height:30px;width:30px}.video-player{scale:0;display:flex;align-items:center;position:fixed;justify-content:center;top:0;right:0;left:0;height:100%;width:100%;background-color:#000000e6;animation:fadeDown .5s ease-in-out;transition:all .5s ease-in-out}.video-player video{width:100%;height:100%;z-index:10}.video-player-full{z-index:10;scale:1;display:flex;align-items:center;position:fixed;justify-content:center;animation:fadeIn .5s ease-in-out;transition:all .5s ease-in-out;top:0;right:0;left:0;height:100%;width:100%;background-color:#000000e6}.video-player-full video{width:100%;height:100%;z-index:10}@media screen and (max-width: 768px){.video-container{align-items:center;justify-content:center;padding:0;margin:0}}@keyframes fadeDown{0%{opacity:100}to{opacity:0}}.login{display:flex;flex-direction:column;align-items:center;margin-top:10%;height:calc(100vh - var(--header-height))}.login .login-form{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}.login .login-form input{margin-bottom:20px;width:300px;border:1px solid #000;border-radius:5px;padding:10px 20px}.login .login-form button{animation:bounce 2s forwards}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--primary-color: white;--secondary-color: #747bff;--header-height: 50px}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}body{margin:0;padding:0;min-height:100vh;min-height:100svh}.loading{display:flex;justify-content:center;align-items:center;height:100vh;background-color:var(--background-color);color:var(--color);animation:fadeIn 1s ease-in-out;border:4px solid rgba(255,255,255,.3);border-top:4px solid rgba(255,255,255,.9)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes bounce{0%{transform:scale(10)}50%{transform:scale(.9)}75%{transform:scale(1.1)}to{transform:scale(1)}}