.auth-container {
     max-width: 25em; /* Default for small screens */
     margin: 0 auto;
     padding: 1.25em;
     border-radius: 0.5em;
     background-color: var(--grey);
     box-shadow: 0 0.25em 0.375em rgba(0, 0, 0, 0.1);
 }
 
 @media (min-width: 768px) {
     .auth-container {
         max-width: 30em; 
     }
 }
 
 @media (min-width: 1024px) {
     .auth-container {
         max-width: 35em; 
     }
 }
 
 .auth-title {
     font-size: 2.0em; 
     font-weight: bold;
     text-align: center;
     margin: 0 1.5em;
     color: var(--dark-blue);
 }
 
 .auth-error {
     color: #d9534f;
     background-color: #f8d7da;
     padding: 0.625em; 
     border-radius: 0.25em; 
     margin-bottom: 1.25em;
     text-align: center;
 }
 
 .auth-form .form-group {
     margin-bottom: 1em; 
 }
 
 .form-label {
     display: block;
     margin-bottom: 0.35em; 
     font-weight: bold;
     color: var(--dark-blue);
     font-size: 1.25em; 
 }
 
 .form-input {
     width: 100%;
     padding: 0.65em; 
     border: 0.065em solid #ccc; 
     border-radius: 0.25em; 
     font-size: 1em; 
 }
 
 .form-input.is-invalid {
     border-color: #d9534f;
     background-color: #f8d7da;
 }
 
 .form-feedback {
     color: #d9534f;
     font-size: 0.75em; 
     margin-top: 0.3em; 
 }
 
 .auth-button {
     display: block;
     width: 100%;
     padding: 0.65em; 
     background-color: var(--blue);
     color: var(--white);
     font-size: 1.15em; 
     border: none;
     border-radius: 0.25em; 
     cursor: pointer;
 }
 
 .auth-button:hover {
     background-color: var(--cyan);
     transition-duration: 0.3s;
 }
 
 .auth-footer {
     text-align: center;
     margin-top: 1em; 
     font-size: 1.05em; 
     color: var(--dark-blue);
 }
 
 .auth-footer a {
     text-decoration: none;
     color: var(--cyan);
 }
 
 .auth-footer a:hover {
     transition-duration: 0.3s;
     text-decoration: none;
     color: var(--blue);
 }