.searchBarContainer{ position: fixed; top: 20vh; left: 50%; transform: translateX(-50%); z-index: 100; width: 60%; background: #fff; padding: 0.5rem; } .searchBarForm{ display: flex; } .elementList { max-height: 60vh; overflow-y: auto; } .eventImageDiv { display: flex; align-items: center; justify-content: center; margin-right: 1rem; width: auto; height: 2rem; flex-shrink: 0; } .searchedEvent{ display: flex; padding: 0.5rem; align-items: center; } .searchedEvent:hover { background: #afafaf; cursor: pointer; } .searchedEvent p { display: flex; align-items: center; text-decoration: none; color: black; } .lineContainer{ display: flex; justify-content: center; align-items: center; } .line{ height: 0; width: 96%; border: #606060 solid 1px; margin: 0.5rem 0; } .eventImage { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 20px; } .searchBarForm input{ background: none; box-shadow: none; height: 2em; } .searchBarForm input:focus{ outline: none; } @media screen and (max-width: 480px) { .searchBarContainer{ width: 80%; } }