/* General styles */ body { background-color: #1a1a2e; color: #eaeaea; font-family: Arial, sans-serif; margin: 0; display: flex; flex-direction: column; min-height: 100vh; } /* Header */ header { text-align: center; background-color: #162447; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); margin: 20px auto; width: 80%; } header h1 { margin: 0; color: #eaeaea; } /* Navigation */ nav { background-color: #1f4068; padding: 10px; border-radius: 10px; width: 80%; margin: 0 auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-around; } nav ul li a { color: #eaeaea; text-decoration: none; padding: 10px; border-radius: 5px; transition: background-color 0.3s; } nav ul li a:hover { background-color: #1b1b2f; } /* Main content */ main { flex: 1; width: 80%; margin: 20px auto; padding: 20px; background-color: #162447; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } main section h2 { color: #4b92db; margin-bottom: 10px; border-bottom: 1px solid #4b92db; padding-bottom: 5px; } main section ul { background-color: #2a2a45; padding: 10px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } main section ul li { color: #eaeaea; padding: 8px 12px; border-radius: 5px; transition: background-color 0.3s; } main section ul li:hover { background-color: #1b1b2f; } /* Footer */ footer { text-align: center; background-color: #1f4068; padding: 20px; border-radius: 10px; margin: 20px auto; width: 80%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } footer button { background-color: #1f4068; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; } footer button:hover { background-color: #1b1b2f; }