@layer reset{*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{color-scheme:light dark;scroll-behavior:smooth}body{margin:unset;min-height:100vh;min-height:100dvh;line-height:1.5;font-family:system-ui,sans-serif}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}button,input,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}img,picture,svg,canvas{display:block;max-inline-size:100%;block-size:auto}:target{scroll-margin-block:5ex}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}}header{padding:2rem;text-align:center;background-color:#212424}header h1{margin-bottom:1rem}.wrapper{width:min(60rem,100% - 2rem);margin-inline:auto}.movies-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1rem}.flex{display:flex;gap:1rem}.movie-card{background-color:#212424;display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:0}.movie-card img{aspect-ratio:3 / 4;padding:0}.movie-card h3{padding:.5rem 1rem}.movie-card div{padding:0rem 1rem 1rem}.search-box{margin-block:1rem;text-align:center}.search-box input{width:min(20rem,100%);padding:.5rem}.heading{margin-bottom:1rem}section{margin-block:2rem}.trending-movies ul{list-style:none;padding:0;margin:0}.trending-movies ul li{width:200px;display:grid;position:relative}.trending-movies ul li>*{grid-area:1 / 1}.trending-movies ul li span{font-size:10rem;align-self:end;line-height:1.4}.trending-movies li:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(#00000003 50%,#000000e6)}.scroller{width:100%;overflow:hidden}.scroller__inner{--_animation-duration: 40s;--_animation-direction: forwards;width:max-content;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1rem;animation:scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite}.scroller__inner li{overflow:hidden}.scroller__inner img{aspect-ratio:3 / 4;object-fit:cover;transition:scale .15s,rotate .1s}.scroller__inner li:hover img{scale:1.1;rotate:3deg}.scroller__inner:has(li:hover){-webkit-animation-play-state:paused;animation-play-state:paused}@keyframes scroll{to{transform:translate(calc(-50% - .5rem))}}