@import"https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap";:root{--primary-color: #22254b;--secondary-color: #373b69}*{box-sizing:border-box}body{background-color:var(--primary-color);font-family:Poppins,sans-serif;margin:0}.head{padding:1rem;display:flex;justify-content:flex-end;background-color:var(--secondary-color)}.search{background-color:transparent;border:2px solid var(--primary-color);border-radius:50px;font-family:inherit;font-size:1rem;padding:.5rem 1rem;color:#fff}.search::placeholder{color:#7378c5}.search:focus{outline:none;background-color:var(--primary-color)}.main{display:flex;flex-wrap:wrap;justify-content:center}.main p{color:#fff;font-size:1.5rem;margin-top:2rem}.moviecard{width:300px;margin:1rem;background-color:var(--secondary-color);box-shadow:0 4px 5px #0003;position:relative;overflow:hidden;border-radius:3px}.moviecard img{width:100%}.movie-list{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;right:2px;position:absolute}.movie-info{color:#eee;display:flex;align-items:center;justify-content:space-between;gap:.2rem;padding:.5rem 1rem 1rem;letter-spacing:.5px}.movie-info h3{margin-top:0}.movie-info span{background-color:var(--primary-color);padding:.25rem .5rem;border-radius:3px;font-weight:700}.movie-info span.green{color:#90ee90}.movie-info span.orange{color:orange}.movie-info span.red{color:red}.overview{background-color:#fff;padding:2rem;position:absolute;left:0;bottom:0;right:0;max-height:100%;transform:translateY(101%);overflow-y:auto;transition:transform .3s ease-in}.moviecard:hover .overview{transform:translateY(0)}@media (max-width:720px) and (max-width:420px){.movie-list{grid-template-columns:repeat(1,1fr);margin-right:10px}.head{display:flex;justify-content:center;align-items:center}}