/* Global styles */ body { font-family: 'Arial', sans-serif; background-color: #fff5f5; color: #333; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; min-height: 100vh; } /* Page container */ .page-container { width: 100%; max-width: 600px; margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); border: 2px solid #ff4d4d; } /* Title */ .page-title { text-align: center; font-size: 28px; color: #ff4d4d; margin-bottom: 20px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; } /* Form styles */ form { display: flex; flex-direction: column; gap: 15px; } .form-group { display: flex; flex-direction: column; } label { font-weight: bold; color: #ff4d4d; margin-bottom: 5px; } input[type="text"], input[type="email"], input[type="number"], textarea, select { padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; color: #333; transition: border-color 0.3s ease-in-out; } input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus, textarea:focus, select:focus { border-color: #ff4d4d; outline: none; } /* Submit button */ button { background-color: #ff4d4d; color: white; font-weight: bold; padding: 12px 20px; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; text-transform: uppercase; transition: background-color 0.3s ease-in-out; } button:hover { background-color: #e60000; } /* Links */ .actions { text-align: center; margin-top: 15px; } .actions a { text-decoration: none; color: #ff4d4d; font-weight: bold; transition: color 0.3s ease-in-out; } .actions a:hover { color: #e60000; } /* Error messages */ .error-message { color: #d9534f; font-size: 14px; margin-top: 5px; font-style: italic; } /* Empty space below */ body::after { content: ''; height: 20px; display: block; }