@import"https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap";.genres-container{display:flex;flex-direction:column;justify-content:center;text-align:center}.genres{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding:0 .2rem;min-width:20rem;max-width:80rem;margin:0 auto 0 0}.card{width:300px;border-radius:3px;box-shadow:0 0 20px #0000001a;position:relative;overflow:hidden;-webkit-transition:box-shadow .5s;transition:box-shadow .5s}.card:hover{box-shadow:0 0 30px #ffffff4e}.card .card-image{width:auto;overflow:hidden;background-size:cover;border-radius:3px;background-color:#000}.card .card-image img{width:100%;display:block;opacity:1;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:opacity .5s,-webkit-transform .5s;transition:opacity .5s,-webkit-transform .5s;transition:opacity .5s,transform .5s;transition:opacity .5s,transform .5s,-webkit-transform .5s}.card:hover .card-image img{opacity:.6;-webkit-transform:scale(1.2);transform:scale(1.2)}.card-header{position:absolute;left:0;bottom:0;right:0;padding:14px 24px;background:#fff;max-height:100%;overflow:auto}.card .card-header .card-title{display:flex;justify-content:space-between;align-items:center;margin:5px 0;letter-spacing:3px;color:#1d263b;font-size:1rem;text-transform:uppercase;text-shadow:0 0 0px #32577f}.card .card-header .fav{margin-left:1rem;display:inline-block}.card .card-header .ratings{background-color:#cbced17a;width:35px;height:35px;display:flex;justify-content:center;align-items:center;margin-top:0;margin-bottom:10px;text-transform:uppercase;font-size:1rem;font-weight:400;color:#1d263b}.card .card-header .ratings span.green{color:#19aa72}.card .card-header .ratings span.orange{color:orange}.card .card-header .ratings span.red{color:#f03636}.card .card-header .realease-date{display:inline-block;margin:0;padding-bottom:.7rem;border-bottom:1px solid rgba(0,0,0,.2);color:#ccc;font-weight:300;display:none}.card .card-info{position:absolute;left:0;bottom:0;right:0;padding:14px 24px;background:#fff;max-height:100%;overflow:auto;transform:translateY(101%);-webkit-transition:all .5s;transition:all .5s ease-in}.card:hover .card-info{transform:translateY(0)}.card .card-info .card-title{display:flex;justify-content:space-between;align-items:center;margin:5px 0;letter-spacing:3px;color:#1d263b;font-size:1rem;text-transform:uppercase;text-shadow:0 0 0px #32577f}.card .card-info .fav{margin-left:1rem;display:inline-block}.card .card-info .realease-date{display:inline-block;margin:0;padding-bottom:.7rem;border-bottom:1px solid rgba(0,0,0,.2);color:#32577f;font-weight:300}.card .card-info .overview{line-height:2;font-size:.95rem;color:#152536b3}.card .card-info::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);box-shadow:inset 0 0 6px #0000004d;background-color:#f5f5f5}.card .card-info::-webkit-scrollbar{width:10px;background-color:#f5f5f5}.card .card-info::-webkit-scrollbar-thumb{background-color:#1d263b;border:2px solid #555555}.searchBar{display:flex;flex-direction:column;justify-content:center;align-items:center;background:url(/assets/searchbg-e65f575d.jpg);background-size:cover}.searchInput{width:0px;height:40px;background-color:#eee;border:none;padding:.8rem;border-top-left-radius:5px;border-bottom-left-radius:5px;transition:width .3s ease;transform:translate(30px)}.searchInput:focus{outline:none}.searchInput.active{width:250px}@media (min-width: 768px){.searchInput.active{width:600px}}:root{--primary-color: #10141e;--secondary-color: #1d263b}*{box-sizing:border-box}body{background-color:var(--primary-color);font-family:Poppins,sans-serif;margin:0;color:#eee}main{display:flex;flex-direction:column;margin:0;flex-grow:1;padding-left:0}section{position:relative;max-width:80rem;margin:3rem auto}a{text-decoration:none}.container{padding:0 .2rem;position:relative;max-width:100%;margin:0 auto}.cards-container{display:flex;gap:1.5rem;justify-content:center;align-items:flex-start;flex-wrap:wrap;margin:0 auto}.stared-movie-container{display:flex;flex-direction:column;justify-content:center;text-align:center}@media (min-width: 768px){.container{padding:0}}@media (min-width: 900px){main{padding-left:240px}}@media (min-width: 1024px){.cards-container{gap:1rem}}