.SearchBarContainer { padding: 1rem 0 0.8rem 0; display: flex; align-items: center; width: 100%; } .SearchInputContainer { display: flex; align-items: center; background-color: #1f1f1f; padding: 0.4rem; border-radius: 0.5rem; width: 40%; } .animeHistoryButton { font-family: "Lexend Deca", serif; outline: none; border: none; background-color: #121212; color: white; margin: 0 0.1rem 0 0.2rem; padding: 0.6rem; cursor: pointer; border-radius: 0.5rem; } .SearchInputContainer input { background-color: transparent; border: none; outline: none; color: white; margin-left: 0.5rem; font-size: 20px; font-family: "Atkinson Hyperlegible", serif; width: 100%; } .SearchLoading { color: white; text-align: center; } /* Search Results */ .SearchResultsContainer { display: flex; align-items: center; overflow-x: auto; padding-bottom: 0.5rem; } .AnimeEntry { position: relative; display: inline-block; overflow: hidden; border-radius: 0.5rem; transition: opacity 200ms ease; margin: 0.4rem; } .SearchResultsContainer:hover .AnimeEntry { opacity: 0.5; } .SearchResultsContainer:hover .AnimeEntry:hover { opacity: 1; } .AnimeEntry p { position: absolute; bottom: 0; /* Adjust the value as needed */ left: 50%; transform: translateX(-50%); margin: 0; color: white; padding: 5px; text-align: center; background-color: #121212ab; backdrop-filter: blur(10px); text-transform: uppercase; width: 100%; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .AnimeEntry img { display: block; transition: transform 200ms ease; } .AnimeEntry img:hover { transform: translateY(-5px) scale(1.04); } .SearchResultsContainer::-webkit-scrollbar { height: 0.5rem; } .SearchResultsContainer::-webkit-scrollbar-thumb { background: rgb(83, 83, 83); border-radius: 1rem; } @media screen and (max-width: 768px) { .SearchInputContainer { width: 100%; } }