@import url(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}header{padding:1rem;display:flex;justify-content:flex-end;background-color:var(--secondary-color)}.search{background-color:rgba(0,0,0,0);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}.movie{width:300px;margin:1rem;background-color:var(--secondary-color);box-shadow:0 4px 5px rgba(0,0,0,.2);position:relative;overflow:hidden;border-radius:3px}.movie img{width:100%}.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:bold}.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}.movie:hover .overview{transform:translateY(0)}