:root{--background: rgb(14, 14, 14);--foreground: white}*{padding:0;margin:0}html,body{max-width:100vw;overflow-x:hidden}body{color:var(--foreground);background-color:var(--background);font-family:Poppins,sans-serif;font-size:18px;padding:3em 20px 6em;line-height:1.4;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main,.container{max-width:750px;margin:0 auto}h1{line-height:1.2}h2{margin-bottom:1em}h3{font-size:1em}h1,h2,h3{font-weight:600}a{color:inherit;text-decoration:none}a:hover,a:focus{text-decoration:underline}button,.button{background-color:#404040;border:1px solid #525252;padding:10px 30px;font-size:inherit;font-family:inherit;color:#bebebe;border-radius:5px;font-weight:600;transition:color .25s;text-transform:uppercase}button:hover,.button:hover{color:#fff;text-decoration:none}button:not([disabled]),.button:not([disabled]){cursor:pointer}.header-inner{display:flex;gap:10px}.header-inner .search{flex-grow:1}header{margin-bottom:2em}.rating{font-weight:700;display:inline-block;border-radius:5px;background-color:gray;width:45px;height:45px;display:flex;justify-content:center;align-items:center;font-size:22px}.rating.low{background-color:maroon}.rating.mid{background-color:orange}.rating.high{background-color:green}.category{width:100%}.category-head{display:flex;align-items:center;gap:1em;justify-content:space-between;margin-bottom:.75em}.category-head h2{margin:0}.category-head a{color:#d3d3d3;font-weight:500;transition:color .25s}.category-head a:hover{text-decoration:none;color:#fff}.category-items{display:flex;gap:10px;overflow-x:scroll}.category-item{width:200px;flex-shrink:0}.category-item:hover{text-decoration:none}.category-item .desc{padding:5px 0 15px;line-height:1.3}.category-item .desc-name,.category-item .desc-role{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.category-item .desc-name{font-weight:600}.category-item .desc-role{font-style:italic}.categories{display:flex;flex-wrap:wrap;gap:2em;flex-direction:column}.categories-foot{display:flex;justify-content:center;width:100%}.bio,.plot{font-style:italic}.film,.person{display:flex;gap:1.5em;flex-wrap:wrap;flex-direction:column}.film-details,.person-details{width:100%;display:flex;flex-wrap:wrap}.film-head{width:100%;display:flex;gap:20px;justify-content:space-between}.poster-crop{aspect-ratio:2/3;background-color:#202020;position:relative;width:100%;overflow:hidden}.poster-crop .poster{display:block;object-fit:cover;width:100%;height:100%}.poster-crop .poster:not([src]){display:none}a .poster-crop{transition:transform .25s}a .poster-crop:hover{transform:scale(.95)}.search input[type=search]{font-size:inherit;padding:10px 15px;background-color:#fff;border:0;border-radius:5px;width:100%;position:relative;font-weight:500}.search input[type=search]::placeholder{color:gray}.search-body{position:relative}.search-results{display:flex;gap:10px;flex-wrap:wrap;max-height:400px;overflow-y:scroll;position:absolute;background-color:var(--background);z-index:1;padding:20px 10px;left:0;right:0}.search-results:empty{display:none}.search-results-item{display:flex;gap:30px;width:100%;align-items:center;font-weight:500}.search-results-item .poster-wrap{width:100px}.navigation-item{text-transform:uppercase;display:inline-block;background-color:#404040;border-radius:5px;border:solid 1px rgb(82,82,82);color:#bebebe;font-weight:600;font-size:24px;letter-spacing:1px;transition:color .2s;width:42px;height:42px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.navigation-item:hover{color:#fff}.cast-and-crew{display:flex;flex-wrap:wrap;gap:1em;width:100%}.companies{width:100%;text-align:center}.companies h2{margin-bottom:.5em}.companies-items{display:flex;gap:1em;flex-wrap:wrap;justify-content:center}.companies .company{line-height:1}.genres{display:flex;gap:1em}.films{width:100%}.films-head{margin-bottom:1em}.films-head h2{font-size:1.2em;font-weight:400;font-style:italic}.films-body{display:grid;gap:20px 12px}@media (max-width: 500px){.films-body{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 501px){.films-body{grid-template-columns:repeat(4,minmax(0,1fr))}}.films-body .category-item{width:auto}.films-foot{display:flex;align-items:center;justify-content:center;padding-top:2em}.all-genres{text-align:center;padding-top:2em}.all-genres a{font-size:2em;transition:all .25s;display:inline-block}.all-genres a:hover,.all-genres a:focus{text-decoration:none;transform:scale(1.25);color:#e8009f}