/* Global Styles */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f7f9fc; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .register-container { background-color: #ffffff; border-radius: 10px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); padding: 40px; width: 100%; max-width: 420px; text-align: center; transition: transform 0.3s ease-in-out; } .register-container:hover { transform: translateY(-5px); } h2 { font-size: 28px; color: #333; margin-bottom: 20px; font-weight: 600; } /* Error Message Styling */ .error-message { background-color: #f8d7da; color: #721c24; padding: 12px; border-radius: 5px; margin-bottom: 20px; font-size: 14px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); } /* Input Group */ .input-group { margin-bottom: 25px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; } .input-group label { font-size: 16px; color: #666; margin-bottom: 8px; } .input-group input { width: 100%; padding: 14px; border: 1px solid #ccc; border-radius: 8px; font-size: 16px; outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; background-color: #f7f9fc; } .input-group input:focus { border-color: #5c6bc0; box-shadow: 0 0 10px rgba(92, 107, 192, 0.3); } /* Submit Button */ button { width: 100%; padding: 15px; background-color: #5c6bc0; color: white; border: none; border-radius: 8px; font-size: 18px; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; } button:hover { background-color: #3f4f8c; transform: translateY(-2px); } button:active { transform: translateY(1px); } /* Register Link */ p { font-size: 16px; color: #777; } a { color: #5c6bc0; text-decoration: none; font-weight: 600; } a:hover { text-decoration: underline; }