* { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f9fafb; color: #333; line-height: 1.8; margin: 0; display: flex; flex-direction: column; min-height: 100vh; } header { background-color: #333; padding: 1rem 0; text-align: center; } header a { color: #ffffff; text-decoration: none; font-weight: 600; padding: 0.5rem 1.5rem; border-radius: 5px; background-color: #555; transition: background 0.3s; } header a:hover { background-color: #777; } main { flex: 1; width: 100%; max-width: 1750px; margin: 0 auto; padding: 2rem; } .container { background: #ffffff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 2rem; margin-bottom: 2rem; width: 100%; } .container h1 { font-size: 1.8rem; margin-bottom: 1rem; color: #333; text-align: center; } .links { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; } .links a { display: flex; align-items: center; padding: 0.8rem 1rem; border-radius: 8px; text-decoration: none; color: #333; background-color: #f4f4f4; transition: background 0.3s; } .links a:hover { background-color: #eaeaea; } .icon { width: 35px; height: 35px; margin-right: 15px; } footer { background-color: #333; color: #ffffff; text-align: center; padding: 1rem; font-size: 0.9rem; width: 100%; margin-top: auto; } footer p { margin: 0; } ul { padding-left: 2rem; } button, .email-link { all: unset; display: inline-block; padding: 7px 30px; font-size: 1em; background: #007BFF; color: #fff; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; text-align: center; } button:hover, .email-link:hover { background: #0056b3; } pre { background-color: #f8f9fa; color: #333; padding: 15px; border-radius: 5px; overflow: auto; margin-top: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .info-message { margin: 20px 0; padding: 15px; background-color: rgba(0, 255, 0, 0.1); border: 1px solid #00cc00; border-radius: 5px; color: #00cc00; display: none; } /* Mobile-friendly adjustments */ @media (max-width: 768px) { main { padding: 1rem; } .container { padding: 1rem; } .container h1 { font-size: 1.5rem; } .links a { flex-direction: column; align-items: flex-start; padding: 0.5rem 1rem; } .icon { width: 30px; height: 30px; margin-right: 10px; } button, .email-link { font-size: 0.9em; padding: 7px 20px; } }