body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #222; color: #fff; background: linear-gradient(45deg, rgba(128, 0, 128, 0.8), rgba(0, 255, 255, 0.8)); background-attachment: fixed; overflow: hidden; } .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); /* For Safari */ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); z-index: -1; } .container { width: 900px; margin: 0 auto; padding: 20px; animation: moveUp 0.5s ease; position: relative; } @keyframes moveUp { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } h1 { text-align: center; } .search-container { text-align: center; margin-bottom: 20px; animation: moveUp 0.5s ease; } #search-input { margin-bottom: 200px; padding: 10px; width: 70%; font-size: 16px; border: none; border-radius: 50px; outline: none; } #search-button { padding: 10px 20px; font-size: 16px; background-color: #333; color: #fff; border: none; cursor: pointer; border-radius: 50px; transition: background-color 0.3s ease; } #search-button:hover { background-color: #555; } #search-results { padding: 10px; border: 1px solid #ccc; background-color: #333; } ul { list-style: none; padding: 0; margin: 0; } li { margin-bottom: 20px; transition: transform 0.3s ease; border: 1px solid #ccc; border-radius: 10px; padding: 10px; background-color: #444; } li:hover { transform: scale(1.05); cursor: pointer; } a { color: #fff; text-decoration: none; } a:hover { text-decoration: underline; } .match-score { font-weight: bold; } .back-button { padding: 10px 20px; font-size: 16px; background-color: #333; color: #fff; border: none; cursor: pointer; border-radius: 50px; margin-top: 10px; transition: background-color 0.3s ease; } .back-button:hover { background-color: #555; }