@font-face{font-family:"DM Sans";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/dmsans-regular.woff2") format("woff2")}@font-face{font-family:"DM Sans";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/dmsans-bold.woff2") format("woff2")}:root{--background:hsl(220, 17%, 7%);--background-alpha-75:rgba(15, 17, 21, 0.75);--banner-background:hsl(250, 6%, 20%);--white-alpha-20:hsla(0, 0%, 100%, 0.2);--on-background:hsl(220, 100%, 95%);--on-surface:hsl(250, 100%, 95%);--on-surface-variant:hsl(250, 1%, 44%);--primary:hsl(349, 100%, 43%);--primary-variant:hsl(349, 69%, 51%);--rating-color:hsl(44, 100%, 49%);--surface:hsl(250, 13%, 11%);--text-color:hsl(250, 2%, 59%);--white:hsl(0, 0%, 100%);--aler-box:hsl(225, 5%, 17%);--aler-box-variant:hsl(160, 2%, 27%);--yellow-golden:hsl(44, 100%, 49%);--roze-pink:hsl(349, 86%, 50%);--overlay:hsla(220, 17%, 7%, 0.7);--banner-overlay:90deg,hsl(220, 17%, 7%) 0%,hsla(220, 17%, 7%, 0.5) 100%;--bottom-overlay:180deg,hsla(250, 13%, 11%, 0),hsla(250, 13%, 11%, 1);--backdrop-overlay:0deg,hsla(250, 13%, 11%, 1),hsla(250, 13%, 11%, 0.9);--ff-dm-sans:"DM Sans",sans-serif;--fs-heading:4rem;--fs-heading-sm:3.2rem;--fs-title-lg:2.6rem;--fs-title:2rem;--fs-title-sm:1.7rem;--fs-body:1.8rem;--fs-button:1.5rem;--fs-label:1.4rem;--fs-small:1.2rem;--weight-bold:700;--shadow-1:0 1px 4px hsla(0, 0%, 0%, 0.75);--shadow-2:0 0 10px hsl(351, 100%, 50%);--shadow-3:0 16px 16px -8px hsla(0, 0%, 0%, 0.3);--radius-4:4px;--radius-8:8px;--radius-12:12px;--radius-16:16px;--radius-24:24px;--radius-36:36px;--transition-short:250ms ease;--transition-long:500ms ease}*,::after,::before{padding:0;margin:0;box-sizing:border-box;user-select:none}.seo-details{display:none}:focus-visible{outline:0}li{list-style:none}a,button,iframe,img,span{display:block}a{color:inherit;text-decoration:none}img{height:auto}button,input{background:0 0;border:none;font:inherit;color:inherit}input{width:100%}button{text-align:left;cursor:pointer}body,html{overscroll-behavior:none;height:100%;overflow:hidden}html{font-family:var(--ff-dm-sans);font-size:10px;scroll-behavior:smooth}body{background:var(--background);color:var(--on-background);font-size:var(--fs-body);line-height:1.5}:focus-visible{outline-color:var(--primary-variant)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--banner-background);border-radius:var(--radius-8)}.load-more::before,.search-wrapper::before{content:"";width:20px;height:20px;border:3px solid var(--white);border-radius:var(--radius-24);border-inline-end-color:transparent;animation:loading .5s linear infinite;display:none}.search-wrapper::before{position:absolute;top:14px;right:12px}.search-wrapper.searching::before{display:block}.load-more{background-color:var(--primary-variant);margin-inline:auto;margin-block:36px 60px}.load-more.loading::before{display:block}.load-more:is(:hover,:focus-visible){--primary-variant:hsl(350, 67%, 39%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(1turn)}}.title,.title-large{font-weight:var(--weight-bold);letter-spacing:.5px}.title{font-size:var(--fs-title)}.heading{color:var(--white);font-size:var(--fs-heading);line-height:1.2}.title-large{font-size:var(--fs-title-lg)}.img-cover{width:100%;height:100%;object-fit:cover;transition:var(--transition-long)}.meta-list{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:12px}.meta-item{display:flex;align-items:center;gap:4px}.btn{color:var(--white);font-size:var(--fs-button);font-weight:var(--weight-bold);max-width:max-content;display:flex;align-items:center;gap:8px;padding-block:12px;padding-inline:20px 24px;border-radius:var(--radius-8);transition:var(--transition-short)}.btn *{transition:var(--transition-short)}.btn.play-btn{background:var(--primary)}.btn.play-btn:is(:hover,:focus-visible){box-shadow:var(--shadow-2)}.btn.play-btn:is(:hover,:focus-visible) img{scale:1.1}.card-badge{background:var(--banner-background);color:var(--white);font-size:var(--fs-label);font-weight:var(--weight-bold);padding-inline:6px;border-radius:var(--radius-4)}.poster-box{aspect-ratio:2/3;transition:var(--transition-long)}.poster-box,.video-card{background-repeat:no-repeat!important;background-size:50px!important;background-position:center!important;background:var(--banner-background);border-radius:var(--radius-16);overflow:hidden}.slider-list{margin-inline:-20px;overflow-x:overlay;padding-block-end:16px}.slider-list::-webkit-scrollbar-thumb{background-color:transparent}.slider-list:is(:hover,:focus-within)::-webkit-scrollbar-thumb{background-color:var(--banner-background)}.slider-list::-webkit-scrollbar-button{width:20px}.slider-list .slider-inner{position:relative;display:flex;gap:16px}.slider-list .slider-inner::after,.slider-list .slider-inner::before{content:"";min-width:4px}.separator{width:4px;height:4px;background:var(--white-alpha-20);border-radius:var(--radius-8)}.video-card{background-image:url(../images/film.svg);aspect-ratio:16/9;flex-shrink:0;max-width:500px;width:calc(100% - 40px)}.container::after,.search-modal::after{content:"";position:fixed;bottom:0;left:0;width:100%;height:150px;background:linear-gradient(var(--bottom-overlay));z-index:1;pointer-events:none}.favorite-btn{width:40px;height:40px;background:var(--background-alpha-75);border-radius:var(--radius-8);transition:var(--transition-long);display:flex;justify-content:center;align-items:center}.favorite-btn b-icon{fill:transparent;stroke:var(--text-color);stroke-width:1.5px;transition:var(--transition-short)}.favorite-btn:active .icon{background-size:15px}.favorite-btn.active b-icon{fill:var(--roze-pink);stroke:var(--roze-pink);stroke-width:1.5px}.favorite-btn.active:is(:hover,:focus-visible) b-icon{stroke:var(--roze-pink)}.favorite-btn:is(:hover,:focus-visible){background:var(--background)}.favorite-btn:is(:hover,:focus-visible) b-icon{stroke:var(--white)}.star-raiting-icon{width:16px;height:16px;padding-block-end:3px}.header{position:relative;padding-block:24px;padding-inline:24px;display:flex;justify-content:space-between;align-items:center;gap:8px}.header .logo{margin-inline-end:auto}.menu-btn,.search-btn{padding:12px}.search-btn{background:var(--banner-background);border-radius:var(--radius-8)}.search-btn img{opacity:.5;transition:var(--transition-short)}.search-btn:is(:hover,:focus-visible) img{opacity:1}.menu-btn .close,.menu-btn.active .menu{display:none}.menu-btn .menu,.menu-btn.active .close{display:block}.search-box{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--background);padding:24px 16px;gap:8px;z-index:1;display:none}.search-box.active{display:flex}.search-wrapper{position:relative;flex-grow:1}.search-wrapper .leading-icon{position:absolute;top:50%;left:12px;transform:translateY(-50%);transition:left var(--transition-short),opacity var(--transition-short)}.search-wrapper:focus-within .leading-icon{opacity:0;left:0}.search-field{background:var(--banner-background);height:48px;line-height:48px;padding-inline:44px 16px;outline:0;border-radius:var(--radius-8);transition:var(--transition-short)}.search-field::placeholder{color:var(--on-surface-variant)}.search-field:hover{box-shadow:0 0 0 2px var(--on-surface-variant)}.search-field:focus{box-shadow:0 0 0 2px var(--on-surface);padding-inline-start:16px}.sidebar{position:absolute;background:var(--background);top:96px;bottom:0;left:-340px;max-width:340px;width:100%;border-block-start:1px solid var(--banner-background);overflow-y:overlay;z-index:4;visibility:hidden;transition:var(--transition-long)}.sidebar.active{left:0;visibility:visible}.sidebar::-webkit-scrollbar-thumb{background:0 0}.sidebar::-webkit-scrollbar-button{height:16px}.sidebar:is(:hover,:focus-within)::-webkit-scrollbar-thumb{background:var(--banner-background)}.sidebar-inner{display:flex;gap:20px;padding-block:36px 0;flex-direction:column;height:100%}.sidebar-footer,.sidebar-list{padding-inline:36px}.sidebar-footer{margin-top:auto}.sidebar-link{color:var(--on-surface-variant);transition:var(--transition-short)}.sidebar-link:is(:hover,:focus-visible){color:var(--on-background)}.sidebar-link.active{color:var(--primary-variant);font-weight:var(--weight-bold)}.sidebar-list{display:grid;gap:0;transition:var(--transition-short)}.sidebar-list .sidebar-link{max-height:0;opacity:0;transition:var(--transition-short)}.sidebar-list .title{margin-block-end:8px;cursor:pointer;transition:var(--transition-short)}.sidebar-list.active{gap:8px}.sidebar-list.active .sidebar-link{max-height:100px;opacity:1}.sidebar-list.active .title{border-left:4px solid var(--primary-variant);padding-inline-start:8px}.sidebar-footer{border-block-start:1px solid var(--banner-background);padding-block:28px}.copyright{color:var(--on-surface-variant);margin-block-end:20px}.copyright a{display:inline-block;transition:var(--transition-short)}.copyright a:is(:hover,:focus-visible){color:var(--on-background)}.overlay{position:fixed;top:96px;left:0;bottom:0;width:100%;background:var(--background);opacity:0;pointer-events:none;transition:var(--transition-short);z-index:3}.overlay.active{opacity:.5;pointer-events:all}.container{position:relative;background:var(--surface);color:var(--on-surface);padding:24px 20px 48px;height:calc(100svh - 96px);overflow-y:overlay;z-index:1}.banner{position:relative;height:calc(100svh - 148px);min-height:600px;border-radius:var(--radius-24);overflow:hidden}.banner :is(.heading,.banner-text,.genre){display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.banner .heading{line-clamp:3;-webkit-line-clamp:3;margin-block-end:16px}.banner .genre{margin-block:12px;line-clamp:1;-webkit-line-clamp:1}.banner .banner-text{line-clamp:2;-webkit-line-clamp:2;margin-block-end:24px}.banner-slider .slider-item{position:absolute;top:0;left:120%;width:100%;height:100%;background:var(--banner-background);opacity:0;visibility:hidden;transition:opacity var(--transition-long)}.banner-slider .slider-item::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--banner-overlay))}.banner-slider .active{left:0;opacity:1;visibility:visible}.banner-content{position:absolute;left:24px;right:24px;bottom:206px;z-index:1;color:var(--text-color)}.slider-control{position:absolute;bottom:20px;left:20px;right:0;border-radius:var(--radius-16) 0 0 var(--radius-16);user-select:none;padding:4px 0 4px 4px;overflow-x:auto}.slider-control::-webkit-scrollbar{display:none}.slider-control .slider-item{width:100px;border-radius:var(--radius-8);flex-shrink:0;filter:brightness(.4);transition:var(--transition-short)}.slider-control .slider-item:is(:hover,:focus-visible):not(.active){filter:brightness(.8)}.slider-control .active{filter:none;box-shadow:var(--shadow-1)}.control-inner{display:flex;gap:12px}.control-inner::after{content:"";min-width:12px}.media-card{position:relative;min-width:200px}.media-card .favorite-btn{position:absolute;top:12px;right:12px;z-index:1;opacity:0;pointer-events:none}.media-card .favorite-btn.active{opacity:1;pointer-events:all}.media-card .card-banner{width:200px}.media-card .title{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-block:8px 4px;position:absolute}.media-card .meta-list{justify-content:space-between;margin-top:42px}.media-card .card-btn{position:absolute;inset:0}.media-card:is(:hover,:focus-visible) .favorite-btn{opacity:1;pointer-events:all}.media-card:is(:hover,:focus-visible) .poster-box{box-shadow:var(--shadow-3)}.media-card:is(:hover,:focus-visible) .img-cover{transform:scale(1.1)}.title-wrapper{margin-block-start:32px;margin-block-end:26px}.backdrop-image{position:absolute;top:0;left:0;width:100%;height:600px;background-repeat:no-repeat;background-size:cover;background-position:center;z-index:-1}.backdrop-image::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--backdrop-overlay))}.media-detail .media-poster{max-width:300px;width:100%}.media-detail .heading{margin-block:24px 12px}.media-detail :is(.meta-list,.genre){color:var(--text-color)}.media-detail .play-btn{margin-block:24px 12px}.media-detail .genre{margin-block:12px 16px}.media-detail .list-item{display:flex;align-items:flex-start;gap:8px;margin-block-end:12px}.media-detail .list-name{color:var(--text-color);min-width:112px}.media-detail .slider-list{margin-block-end:-16px}.meta-list .favorite-btn{height:20px;width:100px;background:0 0;display:flex;align-items:center;justify-content:flex-start;gap:8px}.detail-list{margin-block:24px 32px}.favorite-list .title-wrapper,.genre-list .title-wrapper{margin-block-start:0;margin-block-end:32px}.grid-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));row-gap:20px;column-gap:16px}:is(.genre-list,.favorite-list,.search-modal) :is(.media-card,.card-banner){width:100%}.favorite-list .heading,.genre-list .heading{background-image:url("../images/banner-background.jpg");background-position:center;background-size:cover;text-align:center;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-24);padding:5%;min-height:100px;overflow:hidden}.search-modal{position:fixed;top:96px;left:0;bottom:0;width:100%;background:var(--surface);padding:50px 20px;overflow-y:overlay;z-index:4;display:none}.search-modal.active{display:block}.search-modal .label{color:var(--primary-variant);font-weight:var(--weight-bold);margin-block-end:8px}.search-modal .heading{padding-block-end:24px}.video-player{width:100vw;height:100vh}.video-player iframe{border:none}.alert{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;z-index:5}.alert .alert-inner{display:flex;background:var(--aler-box);padding-inline:24px;padding-block:24px;margin-block:24px;border-radius:var(--radius-12);flex-direction:column;min-width:20%;max-width:50%;height:fit-content;border:.1px solid var(--aler-box-variant)}.alert .alert-inner .alert-content{display:flex;flex-direction:column}.alert .alert-inner .alert-content h3{display:block;font-weight:var(--weight-bold);font-size:var(--fs-title-sm);margin-block-end:12px}.alert .alert-inner .alert-content span{display:block;font-size:var(--fs-label);margin-block-end:24px}.alert .alert-inner .alert-buttons{display:flex;gap:12px;justify-content:flex-end}.alert .alert-inner .alert-btn{background-color:var(--primary-variant);color:var(--white);border-radius:var(--radius-16);padding-inline:24px;padding-block:8px;font-size:var(--fs-label);font-weight:var(--weight-bold)}.alert .alert-inner .alert-btn:is(:hover,:focus-visible){--primary-variant:hsl(350, 67%, 39%)}@media (pointer:coarse){::-webkit-scrollbar{width:0!important;height:0!important}}@media (max-width:575px){.banner{border-radius:var(--radius-16)}.banner .slider-control{right:20px}.banner .slider-control .slider-item{width:80px}.banner .slider-item{display:flex;align-items:center;justify-content:center}.banner .slider-item::before{background:var(--overlay)}.banner .banner-content{margin-block-end:144px;bottom:unset;text-align:center;display:flex;flex-direction:column;align-items:center}.banner .banner-content .heading{margin-block-end:8px}.banner .banner-content .meta-list{justify-content:center}.favorite-list .heading,.genre-list .heading{text-align:center;font-size:var(--fs-heading-sm);border-radius:var(--radius-16)}.grid-list{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}.grid-list .media-card{min-width:110px}.grid-list .media-card .title{font-size:var(--fs-body)}.grid-list .media-card .meta-item{font-size:var(--fs-label)}.grid-list .media-card .card-badge{font-size:var(--fs-small)}.slider-list .media-card{min-width:150px}.slider-list .media-card .card-banner{width:150px}.slider-list .media-card .title{font-size:var(--fs-body)}.slider-list .media-card .meta-item{font-size:var(--fs-label)}.slider-list .media-card .card-badge{font-size:var(--fs-small)}.slider-list .slider-inner{gap:12px}.media-detail{display:flex;flex-direction:column;align-items:center}.media-detail .detail-content{display:flex;flex-direction:column}.media-detail .detail-content .play-btn{align-self:center;max-width:unset;width:100%}.media-detail .heading{text-align:center}.media-detail .meta-list{justify-content:center}}@media (min-width:575px){.banner-content{right:auto;max-width:500px}.slider-control{left:calc(100% - 400px)}.detail-content{max-width:750px}}@media (min-width:768px){:root{--banner-overlay:90deg,hsl(220, 17%, 7%) 0%,hsla(220, 17%, 7%, 0) 100%;--fs-heading:5.4rem}.container{padding-inline:24px}.slider-list{margin-inline:-24px}.search-btn{display:none}.search-box{all:unset;display:block;width:360px}.banner-content{bottom:50%;transform:translateY(50%)}.media-detail{display:flex;align-items:flex-start;gap:40px}.media-detail .detail-box{flex-grow:1}.media-detail .detail-box .btn{margin-block-end:32px}.media-detail .heading{margin-block:0px 12px}.media-detail .media-poster{flex-shrink:0;position:sticky;top:0}.media-detail .slider-list{margin-inline-start:0;border-radius:var(--radius-16) 0 0 var(--radius-16)}.media-detail .slider-inner::before{display:none}}@media (min-width:1200px){.header{padding:28px 32px 28px 40px}.menu-btn,.overlay{display:none}main{display:grid;grid-template-columns:250px 1fr}.sidebar{position:static;visibility:visible;border-block:0;height:calc(100vh - 104px)}.sidebar .active{transform:none}.sidebar-footer,.sidebar-list{padding-inline:40px}.container{height:calc(100svh - 104px);border-top-left-radius:var(--radius-36)}.banner-content{left:100px}.search-modal{top:104px;padding:60px}.backdrop-image{border-top-left-radius:var(--radius-36)}}