/* c:/Users/Madhav/Desktop/mcq_node_project/public/style.css */
 :root {
    --primary-color: #007bff;
    --primary-color-hover: #0056b3;
    --background-color: #f4f4f4;
    --container-background: #fff;
    --text-color: #333;
    --label-color: #555;
    --border-color: #ddd;
    --success-color: green;
    --success-background: #e8f5e9;
    --success-border: #a5d6a7;
    --error-color: red;
    --error-background: #ffebee;
    --error-border: #ef9a9a;
 }
 
 body {
     font-family: Arial, Helvetica, sans-serif; /* Changed font stack slightly for variety */
     background-color: var(--background-color);
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     margin: 0;
     padding: 20px;
     box-sizing: border-box;
 }
 
 .form-container {
     background-color: var(--container-background);
     padding: 25px;
     border-radius: 8px;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
     width: 100%;
     max-width: 400px;
 }
 
 .form-container h2 {
     text-align: center;
     margin-bottom: 20px;
     color: var(--text-color);
 }
 
 .form-container div {
    display: flex; /* Arrange label and input in a row */
    align-items: center; /* Vertically align items in the center */
    margin-bottom: 15px;
 }
 
 
 .form-container label {
     display: block;
     margin-bottom: 5px;
     color: var(--label-color);
     font-weight: bold;
    min-width: 150px; /* Give label a fixed minimum width */
    margin-right: 10px; /* Add some space between label and input */
    text-align: right; /* Align label text to the right for neatness */
 }
 
 .form-container input[type="text"],
 .form-container input[type="email"],
 .form-container input[type="password"] {
     padding: 10px;
    flex-grow: 1; /* Allow input to take remaining space */
     border: 1px solid var(--border-color);
     border-radius: 4px;
     box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
 .form-container input[type="text"]:focus,
 .form-container input[type="email"]:focus,
 .form-container input[type="password"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
 }
 
 .form-container button[type="submit"] {
     width: 100%;
     padding: 10px;
     background-color: var(--primary-color);
     color: white;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     font-size: 16px;
     transition: background-color 0.2s ease;
 }
 
 .form-container button[type="submit"]:hover {
     background-color: var(--primary-color-hover);
 }
 
 .error-message {
     color: var(--error-color);
     background-color: var(--error-background);
     border: 1px solid var(--error-border);
     padding: 10px;
     border-radius: 4px;
     margin-bottom: 15px;
     text-align: center;
 }
 
 .success-message {
     color: var(--success-color);
     background-color: var(--success-background);
     border: 1px solid var(--success-border);
     padding: 10px;
     border-radius: 4px;
     margin-bottom: 15px;
     text-align: center;
 }
 
 .form-container p {
     text-align: center;
     margin-top: 20px;
 }
 
 .form-container p a {
     color: var(--primary-color);
     text-decoration: none;
 }
 
 .form-container p a:hover {
     text-decoration: underline;
 }