/* Global Styles */ body { font-family: 'Arial', sans-serif; background-color: #f8f9fa; margin: 0; padding: 0; color: #333; } h2 { text-align: center; font-size: 2rem; color: #4CAF50; margin-top: 20px; margin-bottom: 20px; } ul { list-style-type: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; } li { background-color: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 10px; padding: 15px; width: 300px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } li:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } a { text-decoration: none; color: #4CAF50; font-size: 1.2rem; font-weight: bold; } a:hover { color: #388E3C; } p { text-align: center; color: #888; font-size: 1.1rem; } a.back-home { display: block; text-align: center; margin-top: 30px; font-size: 1.1rem; color: #007BFF; text-decoration: none; font-weight: bold; transition: color 0.3s ease; } a.back-home:hover { color: #0056b3; } .button { padding: 10px 20px; background-color: #0073e6; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } .button:hover { background-color: #005bb5; } .search-container { display: flex; align-items: center; width: 100%; max-width: 400px; border: 2px solid #007BFF; border-radius: 25px; overflow: hidden; background: white; } .search-container input { flex: 1; padding: 10px 15px; border: none; outline: none; font-size: 16px; } .search-container button { background-color: #007BFF; color: white; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; } .search-container button:hover { background-color: #0056b3; transform: scale(1.05); } .search-container button:active { background-color: #004494; transform: scale(0.98); }