h1,h2,h3,h4,h5,h6,p{margin:0}p:last-child{margin-bottom:0}ul{margin:0;padding:0;list-style:none}a{color:currentColor;text-decoration:none}button{cursor:pointer}img{display:block;max-width:100%;height:auto}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:16px;line-height:1.5;font-weight:400;color:#242424;background-color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{display:flex;flex-direction:column;min-width:100vw;min-height:100vh;margin:0}main{flex-grow:1}main:has(.back-link){text-align:center}.container{min-width:320px;max-width:375px;margin:0 auto;padding:0 16px}@media only screen and (min-width: 768px){.container{max-width:768px}}@media only screen and (min-width: 1200px){.container{max-width:1200px}}@keyframes slide{0%{transform:translate(-140%) translateY(-50%)}to{transform:translate(-104%) translateY(-50%)}}@keyframes stretch{0%{opacity:0;transform:translate(-50%) translateY(100%) scale(.2)}to{opacity:1;transform:translate(-50%) translateY(100%) scale(1)}}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}ul{list-style:none}div a{text-decoration:none}.header-homescreen{background-repeat:no-repeat;background-image:url(/Team-project-filmoteka/assets/background-header-1x-m-CtSYZzRl.png);background-position:center;background-size:cover;width:100%;height:500px;display:flex;padding:14px;background-color:#000c;overflow:hidden;animation:backgroundTransition 20s infinite}@keyframes backgroundTransition{0%{background-image:url(/Team-project-filmoteka/assets/background-header-1x-m-CtSYZzRl.png)}33%{background-image:url(/Team-project-filmoteka/assets/orange@2x-Yo_a3v2o.png)}66%{background-image:url(/Team-project-filmoteka/assets/yellow@2x-BAyJlpPT.png)}to{background-image:url(/Team-project-filmoteka/assets/background-header-2x-m-CiRglB0K.png)}}.header-container{position:relative;display:flex;flex-direction:column;justify-content:space-between;max-width:320px;min-width:280px;margin:20px auto;padding:0}@media (min-device-pixel-ratio: 2),(min-resolution: 192dpi),(min-resolution: 2dppx){.header-home{background-image:url(/Team-project-filmoteka/assets/background-header-2x-m-CiRglB0K.png)}}.navigation{display:flex;justify-content:space-between}.navigation-list{display:flex;gap:20px;padding:0;margin:0;position:relative;z-index:2}.navigation-button{padding:10px 26px;border-radius:100px;background-color:#fff;border:1px solid #b92f2c;color:#000;text-align:center;font-family:Roboto;font-size:14px;font-style:normal;font-weight:500;line-height:normal;text-transform:uppercase;text-decoration:none;cursor:pointer}.navigation-button:hover{background-color:#000;border:1px solid #fff;color:#fff;text-decoration:none}.watched-btn,.queue-btn{color:var(--border-hover-color)}.watched-btn:hover,.queue-btn:hover{background-color:var(--border-hover-color);color:var(--text-color-light)}.watched-queue-container{display:flex;flex-direction:row;gap:5px}.search-form-input{border-radius:100px;outline:none;border:2px solid #fff;background-color:transparent;padding:5px 10px;color:#fff;font-weight:500;font-size:20px;position:relative;z-index:2}.submit-btn{background:transparent;border:none;position:absolute;left:245px;z-index:10}.search-form-input::placeholder{color:#fffc}.search-form-input::placeholder:focus{color:#ffffff4d}.search-form-input:focus{background-color:#000}.search-input-container{display:inline-block;position:relative;z-index:2}.search-form{display:flex;align-items:center;width:250px;justify-content:center}.submit-btn svg{width:24px;height:24px}.fa-search{font-size:25px;line-height:25px;color:#fff;vertical-align:middle;cursor:pointer;right:0}.logo-container{display:flex;justify-content:flex-start;align-items:center;gap:15px;color:#fff;text-align:center;font-family:Roboto;font-weight:500}.logo-container a .title{font-size:32px}.logo-film-now svg{width:40px;height:40px}.film-icon{font-size:40px;color:#fff;flex-shrink:0}@media screen and (min-width: 320px) and (max-width: 767px){.header-homescreen{height:100%;min-height:360px;padding:0;margin:0}.header-container{margin:0;padding:0 30px;width:100%}.header-homescreen,.header-container{display:flex;justify-content:center;gap:20px;width:100%}.watched-queue-container{position:absolute;bottom:40px}.submit-btn{background:transparent;border:none;position:absolute;left:185px;z-index:2}.search-form .search-form-input{width:150px;flex-grow:1}.navigation-list,.watched-queue-container{align-items:center;margin:0;list-style:none}.navigation-item{margin-bottom:10px}.navigation-list{bottom:20px}.search-form{width:100%;padding:10px}.logo-container .title{font-size:32px}.theme-switch-wrapper{position:relative;top:45px;right:30px;width:50px;height:30px}.fa-search{margin:40px}}@media screen and (min-width: 768px) and (max-width: 1280px){.header-homescreen{background-repeat:no-repeat;background-image:url(/Team-project-filmoteka/assets/background-header-1x-t-D2Fo08Ru.png);background-size:cover}@media (min-device-pixel-ratio: 2),(min-resolution: 192dpi),(min-resolution: 2dppx){.header-homescreen{background-image:url(/Team-project-filmoteka/assets/background-header-2x-t-CXfE4xAX.png)}}.header-container{min-width:710px}.navigation-button{padding:15px 36px;font-size:16px}.search-form-input{padding:5px 0 5px 10px;font-size:28px}.watched-queue-container{flex-direction:row;position:absolute;right:30px}.search-form{width:320px;align-self:flex-start;margin-left:15px}.submit-btn{left:300px;z-index:2}.logo-container{gap:20px;display:flex;justify-content:flex-start}.logo-container a .title{font-size:60px}.fa-search{font-size:35px;line-height:35px}.title{font-size:40px}.film-icon{font-size:80px}}.logo-container a .title{font-size:60px}.film-icon{font-size:80px}@media (min-width: 1280px){.header-homescreen{background-image:url(/Team-project-filmoteka/assets/background-header-1x-d-BVWPK2-L.png);padding:25px 0;justify-content:space-between}@media (min-device-pixel-ratio: 2),(min-resolution192dpi),(min-resolution: 2dppx){.header-homescreen{background-image:url(/Team-project-filmoteka/assets/background-header-2x-d-CxrhG8CS.png)}}.header-container{min-width:1260px}.logo-container a .title{font-size:80px}.search-form{margin-left:21px}.search-form-input{padding:10px}.fa-search{font-size:45px;line-height:45px}.film-icon{font-size:100px}}.vite-promo{padding:50px 0}.vite-promo-thumb{position:relative;max-width:320px;margin:0 auto}.vite-promo-thumb:before{content:"";position:absolute;top:0;left:0;z-index:-1;display:block;width:100%;height:100%;border-radius:50%;background-image:linear-gradient(-45deg,#bd34fe 50%,#47caff 50%);filter:blur(4.5rem)}.main-title{text-align:center}.main-title-gradient{display:block;font-size:2em;background-image:linear-gradient(120deg,#bd34fe 30%,#41d1ff);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}@media only screen and (min-width: 768px){.main-title-gradient{font-size:3em}}.main-title-link{position:relative;letter-spacing:.04em}.main-title-link:before{content:"";position:absolute;bottom:4%;left:50%;transform:translate(-50%) skew(-12deg) rotate(-2deg);z-index:-1;width:108%;height:24%;background-color:#41d1ff;transition:.2s ease}.main-title-link:hover:before,.main-title-link:focus:before{background-color:#ff6b0a}.vite-promo .title,.vite-promo .text{margin-bottom:1.5rem;font-size:3.5rem;font-weight:700;line-height:1.14;color:#213547}.vite-promo .tagline{font-size:1.5rem;line-height:1.5;color:#3c3c3cb3}.vite-promo .actions{display:flex;align-items:center;gap:1rem}.vite-promo .link{display:inline-block;padding:.5rem 1.25rem;font-weight:500;text-align:center;white-space:nowrap;color:#ffffffde;background-color:#646cff;border:1px solid transparent;border-radius:1.25rem;transition:color .25s,border-color .25s,background-color .25s}.badges-list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:32px}.badges-link{display:block;padding:8px 16px;border:1px solid;border-radius:8px;transition:.2s ease-in}.badges-link:hover,.badges-link:focus{transform:scale(1.06);color:#747bff}.back-link{position:relative;display:inline-block;padding:4px 8px;margin-top:32px;border:1px solid;border-radius:8px}.back-link:before{content:"";position:absolute;top:50%;left:0;width:16px;height:16px;background-repeat:no-repeat;background-position:center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");transition:.3s ease-in;transition-property:opacity;opacity:0;animation:slide .5s linear infinite alternate-reverse both;animation-play-state:paused}.back-link:hover:before{opacity:1;animation-play-state:running}.footer-container{display:flex;align-items:center;justify-content:center;width:100%;padding:20px;color:#080808;text-align:center;font-family:Roboto;font-size:14px;max-width:320px;margin:0 auto}footer{background-color:#f7f7f7;width:100%}.text-direction{display:flex;justify-content:center;align-items:center;gap:10px;margin-left:10px}.heart-icon{color:#b92f2c;width:30px;height:20.76px;flex-shrink:0;animation:pulse 1.5s infinite ease-in-out}.students-goit{color:orange;font-weight:700;margin-bottom:0;text-decoration:underline;cursor:pointer}.rights-reserved{margin-bottom:0}.footer-modal{display:none;position:fixed;z-index:12;left:0;top:0;width:100%;height:100%;overflow:hidden;background-color:#000c}.footer-modal-content{border-radius:10px;background-color:#f7f7f7;padding:20px;position:fixed;top:50%;left:50%;width:80%;transform:translate(-50%,-50%);max-height:80vh;max-width:600px;background:#000000b3;box-shadow:0 10px 30px #e6aa13;border:2px outset #e6aa13;color:#fff;overflow:hidden}.title-btn-container{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:15px}.footer-modal-title{font-size:18px}.close-button-member{background-color:transparent;border:none}.close-button-member svg{width:30px;height:30px;cursor:pointer}.close-button-member:hover,.close-button-member:focus{scale:1.2}.group-section{display:flex;flex-direction:column;gap:20px;padding:0}.member-section{background-color:#cab82d80;display:flex;justify-content:space-between;align-items:center;height:80px;border-radius:10px;border:1px solid #fff;padding:10px}.member-title,.member-ttl1{color:#fff;font-family:Roboto;font-size:14px;font-weight:500}.member-section:hover .last-image{border:3px solid #e6aa13}.member-section:hover{background-color:#ffffffe6;color:#e6aa13}.member-section:hover .member-description,.member-section:hover .member-name{color:#e6aa13}.member-section{transition:box-shadow .3s ease,transform .3s ease}.member-section:hover{box-shadow:0 0 15px 10px #b92f2c80;transform:scale(1.05)}.footer-modal-title:hover:after{left:100%;transform:skew(50deg) skewY(10deg)}.footer-modal-title:before,.footer-modal-title:after{content:"";position:absolute;top:0;width:100%;height:200%;background:#ffffff4d;transition:.9s;pointer-events:none}.footer-modal-title:before{left:-500%}.footer-modal-title:after{right:-400%}@media (max-width: 500px){.footer-modal-content{width:90%}.member-section{padding:0}.member-name,.member-description{font-size:12px}.member-name{margin:0}.member-description{line-height:50%}.footer-container{max-width:500px}}@media (min-width: 768px){.group-section{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.title-btn-container{margin-bottom:50px}.footer-modal-title{font-size:28px}.footer-modal-content{max-width:800px;height:500px}.member-section{height:auto}.footer-container{max-width:700px}}@media (min-width: 1280px){.group-section{gap:28px}.footer-modal-content{max-width:1000px}}*{margin:0;padding:0;box-sizing:border-box}:root{--background-color-light: #ffffff;--background-color-dark: #000000;--text-color-dark: #000000;--text-color-light: #ffffff;--border-hover-color: #b92f2c}.container{display:flex;justify-content:center;align-items:center;max-width:1280px;margin:0 auto;padding:32px;height:100%;background-color:#f5e8e8}.queue,.watched{display:none;grid-template-columns:1fr;gap:20px;align-items:center;max-width:1280px;padding:32px;height:100%;background-color:#f5e8e8;margin:0 auto;justify-content:center;align-content:center}.movie-wrapper{display:grid;grid-template-columns:1fr;gap:20px;justify-content:center;padding:20px;background-color:var(--background-color-light);background-color:#f5e8e8}.movie-wrapper__card{border-radius:10px;overflow:hidden;background-color:var(--background-color-light);transition:border .3s ease;cursor:pointer;transition:border .3s ease,box-shadow .3s ease;flex-shrink:0;width:280px;height:auto;position:relative;background-color:#f5e8e8}.movie-wrapper__card:hover{border:1px solid var(--border-hover-color);box-shadow:0 6px 22px var(--border-hover-color);scale:1.02;background-color:#f5e8e8}.movie-wrapper__card-img img{width:100%;height:auto;object-fit:cover}.movie-wrapper__footer{padding:10px;color:var(--text-color-light)}.movie-wrapper__title{font-size:16px;margin:5px 0;font-weight:500;text-transform:uppercase}.movie-wrapper__info{font-size:14px;color:#b92f2c;font-weight:500;line-height:16px}.movie-wrapper__info-rating{background-color:#b92f2c;color:#fff;padding:2px 6px;border-radius:4px;font-size:24px;font-weight:500px;display:inline-block;margin-left:4px;position:absolute;left:5%;top:5%}@media (max-width: 320px){.movie-wrapper__card{width:240px;padding:0}.movie-wrapper__card-img{width:100%}}@media (min-width: 768px){.movie-wrapper{grid-template-columns:repeat(2,1fr);gap:30px}.movie-wrapper__card-img img{width:336px;height:455px}.movie-wrapper__card{width:336px}.queue,.watched{grid-template-columns:repeat(2,1fr);justify-content:center;gap:30px}}@media (min-width: 1280px){.movie-wrapper{grid-template-columns:repeat(4,1fr);max-width:1280px}.movie-wrapper__info{font-size:20px;font-weight:500;line-height:24px}.movie-wrapper__card-img img{width:295px;height:auto}.movie-wrapper__card{width:295px}.queue,.watched{grid-template-columns:repeat(4,1fr);justify-content:center;gap:40px}}body.dark-theme{--background-color-light: #000000;--text-color-light: #ffffff}.dark{background-color:#393646}.btn-dark{background-color:#fff;border:none;cursor:pointer}.btn-dark img{width:30px;height:auto}*,*:before,*:after{box-sizing:border-box}:root{--clr-light: #f5e8e8;--clr-dark: #b92f2c;--clr-primary: #c96818;--clr-secondary: #631918;--clr-white: #fff;--foreground: var(--clr-dark);--background: var(--clr-light);--second-background: var(--clr-secondary)}.nightmode{--clr-light: #f5e8e8;--clr-dark: #1a1a1a;--foreground: var(--clr-light);--background: var(--clr-dark)}body{background:var(--background);transition:.4s ease-in}body.nightmode,body.nightmode .movie,body.nightmode .queue,body.nightmode .watched,body.nightmode .container,body.nightmode .movie-wrapper,body.nightmode .movie-wrapper__card,body.nightmode .movie-wrapper__title,body.nightmode .site-nav-item a,body.nightmode .watched-queue-container li a,body.nightmode footer,body.nightmode .footer-container,body.nightmode .students,body.nightmode .heart,body.nightmode .film-modal-title,body.nightmode .film-modal-content,body.nightmode .close-modal,body.nightmode #scrollToTopBtn,body.nightmode .fas.fa-arrow-up{background:var(--background);color:var(--clr-white)}body.nightmode .site-nav-item a:hover,body.nightmode .watched-queue-container li a:hover{background-color:var(--clr-white);color:var(--second-background);border:1px solid var(--second-background)}body.nightmode .film-modal-content{box-shadow:8px 10px 20px #b92f2c}#scrollToTopBtn:hover{box-shadow:4px 5px 10px var(--clr-white)}html{scrollbar-color:var(--clr-primary) var(--background)}body::-webkit-scrollbar{width:20px}body.nightmode body::-webkit-scrollbar-track{background:#b92f2c}body::-webkit-scrollbar-thumb{background:radial-gradient(circle,#d92c11 20%,#b03039 47%,#a30c17 76%);border-radius:20px;border:3px solid var(--background)}.theme-switch-wrapper{display:flex;align-items:flex-start}.theme-switch{position:relative;display:inline-block;width:70px;height:34px}.theme-switch input{display:none}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#fff;transition:.4s;border-radius:34px;padding:0 5px;display:flex;align-items:center;justify-content:space-between}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#b92f2c;transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--clr-dark);border:1px solid #fff}input:checked+.slider:before{transform:translate(36px);background-color:#fff}input:not(:checked)+.slider #sunIcon{transform:translate(30px)}.slider.round{border-radius:34px}.film-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:10}.film-modal-content{max-height:98%;position:relative;background-color:#fff;padding:10px;border-radius:8px;box-shadow:5px 7px 15px #b8b8b899;width:80%;max-width:700px;height:auto;display:flex;flex-direction:column;justify-content:space-around;gap:10px;font-family:Roboto;overflow-y:auto}.close-modal{position:absolute;top:6px;right:13px;cursor:pointer;color:#000;font-size:40px;padding:5px;line-height:1}.close-modal:hover{scale:1.4}.film-modal-trailer{width:100%;height:auto;position:relative;padding-bottom:56.25%;overflow:hidden}.film-modal-poster img{width:100%;height:500px;overflow:hidden;object-fit:scale-down;display:inline-block;justify-content:center}.film-modal-trailer iframe{position:absolute;top:0;left:0;width:100%;height:100%}.film-modal-title{text-align:center;font-size:20px;font-weight:500;color:#b92f2c;font-style:normal;line-height:20px;margin-top:15px}.film-modal-content h3{font-size:16px}.film-modal-score span{display:inline-block;color:#fff;font-size:18px;background-color:#b92f2c;border-radius:4px;padding:2px 6px}.modal-genre-paragraph b{font-size:16px}.film-modal-about{font-size:18px}.film-modal .film-modal-content p{font-size:14px}.film-modal-actions{display:flex;flex-direction:row;justify-content:center;gap:40px;padding:10px}.film-modal-actions button{display:flex;justify-content:center;align-items:center;padding:5px;gap:10px;border-radius:100px;background:#b92f2c;cursor:pointer;color:#fff;border:#fff}.film-modal-actions button:hover{background:#000;color:#fff}@media (max-width: 320px){.film-modal .film-modal-content{padding:5px;width:95%}.film-modal-content .close-modal{top:5px;right:5px;font-size:26px}.film-modal-content .film-modal-title{font-size:20px;margin-top:25px;font-weight:500}.film-modal-content .film-modal-about,.film-modal-content p{font-size:16px}.film-modal-actions{font-size:12px;gap:15px;padding:5px}.film-modal-actions button{padding:10px 5px}}@media (max-width: 500px){.film-modal-content{height:auto;width:95%;padding:10px}.close-modal{position:absolute;top:10px;right:10px;cursor:pointer;font-size:20px;color:#000;font-size:30px;padding:0}.film-modal-content .film-modal-actions button,.film-modal-actions button{padding:5px}}@media (min-width: 768px){.film-modal-title{margin-top:30px}.film-modal-content{max-width:800px}}@media (min-width: 1280px){.film-modal-content{max-width:950px}}#scrollToTopBtn{position:fixed;bottom:150px;right:20px;z-index:12;border:none;outline:none;background-color:#b92f2c;cursor:pointer;padding:20px;border-radius:10px}.fas.fa-arrow-up{color:#fff}#scrollToTopBtn:hover .fas.fa-arrow-up{scale:2}#scrollToTopBtn:hover{box-shadow:4px 5px 10px #b92f2c}@media (max-width: 320px){#scrollToTopBtn{bottom:50px}}@media (max-width: 500px){#scrollToTopBtn{bottom:50px;right:10px}}#pagination-container .tui-pagination .tui-page-btn,#pagination-container .tui-pagination .tui-ico-first,#pagination-container .tui-pagination .tui-ico-last,#pagination-container .tui-pagination .tui-ico-prev,#pagination-container .tui-pagination .tui-ico-next,#pagination-container .tui-pagination .tui-ico-ellip{background-color:#b92f2c;color:#fff;border:solid 1px #fff;border-radius:5px;margin:5px}#pagination-container .tui-pagination .tui-ico-first,#pagination-container .tui-pagination .tui-ico-last,#pagination-container .tui-pagination .tui-ico-prev,#pagination-container .tui-pagination .tui-ico-next,#pagination-container .tui-pagination .tui-ico-ellip{border:none}#pagination-container .tui-pagination .tui-page-btn.tui-is-disabled,#pagination-container .tui-pagination .tui-page-btn.tui-is-selected{opacity:.5;pointer-events:none}@media (max-width: 500px){#pagination-container .tui-pagination{max-width:300px}}
