*{padding:0;margin:0;font-family:Lato,sans-serif;box-sizing:border-box}.main{width:100%;min-height:100vh;background-color:#000}.row{display:flex;flex-wrap:wrap;justify-content:space-between}.box{padding:10px;width:25%;flex-basis:25%;height:400px;overflow:hidden;border-radius:5px;position:relative}.box img{width:100%;height:100%;box-shadow:0 4px 5px #0003}.box .overlay{width:100%;max-height:100%;min-height:auto;position:absolute;bottom:-100%;font-weight:700;padding:20px;border-radius:10px 10px 0 0;left:0;transition:.5s;background-color:#fff}.box span{color:orange;display:inline-block;font-weight:700;font-size:25px}.title{width:100%;display:flex;justify-content:space-between}.box:hover .overlay{bottom:0%}.overlay h2{margin-bottom:10px}#search{width:500px;padding:5px 30px;background-color:#34495eb3;outline:none;border:none;box-shadow:0 0 1px #fff;color:#fff;margin-top:10px;font-size:30px;border-radius:25px;transition:1s;margin-bottom:15px}#search:focus{background-color:#fff;color:#000}@media (max-width: 425px){#movie-box{display:flex;flex-direction:column;align-items:center}.box{width:300px}h3{display:none}#search{width:200px}#search::placeholder{font-size:18px}}@media (min-width: 426px) and (max-width: 768px){.box{width:33.33%;flex-basis:33.33%}#movie-box{display:flex;flex-wrap:wrap}h3{display:none}.box .overlay{width:100%}h2{font-size:16px}.title{display:flex;justify-content:space-between}}