@import"https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700";@import"https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i";*{margin:0;border:0;box-sizing:border-box}:root{--font-roboto: "Roboto Slab", serif;--font-raleway: "Raleway", sans-serif}body{font-family:var(--font-roboto);background:#780206;background:-webkit-linear-gradient(to right,#061161,#780206);background:linear-gradient(to right,#061161,#780206)}.app{padding:4rem;display:flex;justify-content:center;align-items:center;flex-direction:column}h1{font-size:3rem;letter-spacing:.9px;background:linear-gradient(90deg,#fff,#f9d3b400);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;width:fit-content}.search-wrap{width:71%;margin:4rem 0 2rem}.search{width:100%;display:flex;align-items:center;justify-content:center;padding:1.5rem 1.75rem;border-radius:3rem;background:#1f2123;-webkit-box-shadow:5px 5px 7px #1c1d1f,-5px -5px 7px #222527;box-shadow:5px 5px 7px #1c1d1f,-5px -5px 7px #222527}.search input{flex:1;border:none;font-size:1.5rem;font-family:var(--font-raleway);font-weight:500;padding-right:1rem;outline:none;color:#a1a1a1;background:#1f2123}.search img{width:35px;height:35px;cursor:pointer}.search img.disabled{opacity:.35;cursor:default}.empty{width:100%;margin-top:3rem;display:flex;justify-content:center;align-items:center}.empty h2{font-size:1.25rem;color:#f9d3b4;font-family:var(--font-raleway)}.container{width:100%;margin-top:3rem;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.movie{width:310px;height:460px;margin:1.5rem;position:relative;border-radius:12px;overflow:hidden;border:none;cursor:pointer;transition:all .4s cubic-bezier(.175,.885,0,1);box-shadow:0 13px 10px -7px #0000001a}.movie div:nth-of-type(1){position:absolute;padding:16px;width:100%;opacity:0;top:0;color:#f9d3b4}.movie:hover{box-shadow:0 30px 18px -8px #0000001a;transform:scale(1.05)}.movie div:nth-of-type(2){width:100%;height:100%}.movie div:nth-of-type(2) img{height:100%;width:100%}.movie div:nth-of-type(3){z-index:2;background-color:#343739;padding:16px 24px 24px;position:absolute;bottom:0;right:0;left:0}.movie div:nth-of-type(3) span{font-family:Raleway,sans-serif;text-transform:uppercase;font-size:13px;letter-spacing:2px;font-weight:500;color:#fff}.movie div:nth-of-type(3) h3{margin-top:5px;font-family:Roboto Slab,serif;color:#9ef3fc}.movie:hover div:nth-of-type(2){height:100%;opacity:.3}.movie:hover div:nth-of-type(3){background-color:transparent}.movie:hover div:nth-of-type(1){opacity:1}.movie .fav-btn{position:absolute;top:12px;right:12px;background:transparent;color:#f9d3b4;font-size:1.4rem;cursor:pointer;z-index:3;opacity:1;line-height:1}.movie .fav-btn.active{color:#9ef3fc}.movie.skeleton{background:#343739;pointer-events:none;cursor:default;box-shadow:none;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.45}50%{opacity:.85}}.nav{display:flex;gap:1.5rem;margin-top:1.5rem}.nav button,.type-filter button,.load-more,.details-close,.details-fav{background:transparent;color:#f9d3b4;font-family:var(--font-raleway);font-size:1rem;cursor:pointer}.nav button.active{color:#9ef3fc;border-bottom:1px solid #9ef3fc;padding-bottom:2px}.type-filter{display:flex;gap:1.25rem;margin-top:.5rem;flex-wrap:wrap;justify-content:center}.type-filter button{font-size:.95rem;opacity:.7}.type-filter button.active{opacity:1;color:#9ef3fc}.load-more{margin:1.5rem 0 2rem;padding:.85rem 2rem;border-radius:2rem;background:#1f2123;color:#f9d3b4;box-shadow:5px 5px 7px #1c1d1f,-5px -5px 7px #222527}.load-more:disabled{opacity:.6;cursor:default}.details-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;display:flex;justify-content:center;align-items:flex-start;overflow-y:auto;padding:2rem 1rem;z-index:10}.details{width:100%;max-width:900px;background:#1f2123;border-radius:12px;padding:1.5rem;margin:auto}.details-close{margin-bottom:1.25rem}.details-status{color:#f9d3b4;font-family:var(--font-raleway);padding:2rem 0;text-align:center}.details-body{display:flex;gap:1.5rem;flex-wrap:wrap}.details-body img{width:260px;max-width:100%;border-radius:8px;object-fit:cover}.details-info{flex:1;min-width:220px;color:#f9d3b4;font-family:var(--font-raleway)}.details-info h2{font-family:var(--font-roboto);color:#9ef3fc;margin-bottom:.5rem}.details-meta,.details-rating,.details-plot,.details-info p{margin-bottom:.75rem;line-height:1.5;color:#cfcfcf}.details-rating{color:#f9d3b4}.details-fav{margin-top:.5rem;padding:.6rem 1rem;border-radius:2rem;background:#343739}.details-fav.active{color:#9ef3fc}@media screen and (max-width:600px){.app{padding:4rem 2rem}.search-wrap{width:100%}.search{padding:1rem 1.75rem;width:100%}.search input{font-size:1rem}.search img{width:20px;height:20px}.details-body{flex-direction:column;align-items:center}.details-info{text-align:center}}@media screen and (max-width:400px){.app{padding:4rem 1rem}h1{font-size:2rem}.container{margin-top:2rem}.movie{width:100%;margin:1rem}}