@import"https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700";*{border:0;margin:0;box-sizing:border-box}:root{--font-roboto: "Roboto Slab", serif;--accent: #f9d3b4;--bg: #16181a;--surface: #1f2123}body{font-family:var(--font-roboto);background-color:var(--bg)}.app{align-items:center;display:flex;flex-direction:column;padding:4rem;min-height:100vh}h1{background:linear-gradient(90deg,#f9d3b4,#f9d3b499);-webkit-background-clip:text;background-clip:text;font-size:3rem;-webkit-text-fill-color:transparent;width:fit-content}.search{align-items:center;background-color:var(--surface);border-radius:3rem;box-shadow:5px 5px 7px #101112,-5px -5px 7px #24272a;display:flex;justify-content:center;margin:4rem 0 2rem;padding:1.5rem 0 1.75rem;width:min(600px,90%)}.search input{background-color:var(--surface);border:none;color:#e5e5e5;flex:1;font-size:1.5rem;font-weight:500;outline:none;padding:0 2rem}.search input::placeholder{color:#6b6b6b}.search img{height:35px;margin-right:2rem;width:35px;opacity:.7}.empty{align-items:center;color:var(--accent);display:flex;font-size:1.25rem;justify-content:center;margin-top:3rem;width:100%}.container{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;margin-top:3rem;width:100%;max-width:1400px}.movie{background-color:var(--surface);border:none;border-radius:12px;box-shadow:0 13px 10px -7px #0000004d;height:420px;overflow:hidden;position:relative;transition:all .4s cubic-bezier(.175,.885,0,1);width:100%}.movie:hover{box-shadow:0 30px 15px -8px #0006,0 0 0 3px #f9d3b459;transform:scale(1.05)}.movie .year{color:var(--accent);opacity:0;padding:16px;position:absolute;top:0;width:100%;transition:opacity .3s ease}.movie .poster,.movie .poster img{height:100%;width:100%;object-fit:cover;transition:opacity .4s ease}.movie .meta{background-color:#343739;bottom:0;padding:16px 24px 24px;position:absolute;width:100%;z-index:2;transition:background-color .3s ease}.movie .meta span{color:#f0f0f0;font-size:14px;font-weight:500;letter-spacing:2px;text-transform:uppercase}.movie .meta h3{color:var(--accent);margin-top:5px}.movie:hover .poster{opacity:.3}.movie:hover .meta{background-color:transparent}.movie:hover .year{opacity:1}@media only screen and (max-width:1100px){.container{grid-template-columns:repeat(3,minmax(0,1fr))}}@media only screen and (max-width:767px){.app{padding:4rem 1.25rem}.search{padding:1rem 1.75rem}.search input{font-size:1rem}.search img{height:20px;width:20px}h1{font-size:2rem}.container{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2rem}}@media only screen and (max-width:480px){.container{grid-template-columns:1fr}}.footer{margin-top:4rem;padding-top:2rem;color:#6b6b6b;font-size:.9rem;text-align:center}.footer p+p{margin-top:.4rem}.footer a{color:var(--accent);text-decoration:none}.footer a:hover{text-decoration:underline}