/* Global styles */ body { font-family: 'Arial', sans-serif; background-color: #f9f9f9; color: #333; margin: 0; padding: 20px; display: flex; justify-content: center; 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 #db5559; } /* Title */ .page-title { text-align: center; font-size: 28px; color: #db5559; 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: #db5559; margin-bottom: 5px; } input[type="text"], input[type="email"], input[type="number"], textarea, select { padding: 10px; border: 1px solid #ddd; 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: #db5559; outline: none; } /* Submit and Delete buttons */ button { background-color: #db5559; 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: #bf494d; } .delete-button { background-color: #d9534f; margin-top: 10px; } .delete-button:hover { background-color: #c9302c; } /* Back to list link */ .actions { text-align: center; margin-top: 15px; } .actions a { text-decoration: none; color: #db5559; font-weight: bold; transition: color 0.3s ease-in-out; } .actions a:hover { color: #a02326; }