*{box-sizing:border-box}body{font-family:Roboto,sans-serif;background-color:#240a52;margin:0}.main{overflow-y:auto;width:95%;margin:0 auto}.movies{color:#fff;width:100%;margin:30px auto 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,2fr));align-items:end;gap:20px}.elements{display:flex;flex-direction:column;border-radius:black 100px}.elements img{border-radius:10px 10px 0 0}.title{text-align:center;padding:10px;border-radius:0 0 10px 10px;background-color:#7530ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.searchBar{text-decoration:none;width:80%;height:37px;margin:0 auto}.searchBar input[type=text]{padding-left:15px;text-decoration:none;color:#fff;font-size:16px;background-color:#240a52;opacity:1;width:100%;height:100%;border-radius:5px}.container{display:flex;justify-content:right}.overlay{overflow-y:auto;animation:opacity .4s ease-in-out forwards}.container1{display:flex;justify-content:space-between}.brand{color:#b952f5}.app{overflow-y:auto}.overlay.hide{animation:fadeOutDown .4s ease forwards}@keyframes opacity{0%{opacity:0}to{opacity:1}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0}}.material-symbols-outlined{background-color:transparent;font-size:40px;color:#fff;cursor:pointer;transition:color .3s}.material-symbols-outlined:hover{color:red}button{background-color:transparent;border:none}.search{padding:8px;font-size:24px;font-weight:1000;border-radius:30px;color:#fff;background-color:#7530ada6}.search:hover{background-color:#fff;color:#7530ad}