.login-container { background-color: var(--ice-white); padding: 160px 20px; color: var(--dark-blue); margin-top: 84px; }
.login-container .content { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.login-container .form-wrapper { max-width: 420px; width: 100%; border: 1px solid var(--lightgrey); border-radius: 12px; padding: 30px 40px; }
.login-container .form-wrapper h1 { font-size: 32px; text-align: center; margin-bottom: 40px; }
.login-container form { width: 100%; display: flex; flex-direction: column; gap: 20px; }
.login-container form input { border: 1px solid var(--dark-blue); color: var(--dark-blue); }
.login-container form input:focus { outline: none; border: 1px solid var(--light-sky-blue); }
.login-container form button { background-color: var(--blue); border: 1px solid var(--blue); color: var(--ice-white); height: 40px; border-radius: 20px; font-size: 18px; transition: all 0.3s ease; cursor: pointer; letter-spacing: 1px; }
.login-container form button:hover { background-color: var(--sky-blue); border: 1px solid var(--sky-blue); color: var(--white); }


.login-container .error-message { color: #e80505; font-size: 16px; }

@media screen and (max-width: 1024px){

    .login-container { margin-top: 65px; padding: 120px 20px; }

}

@media screen and (max-width: 540px){ 

    .login-container { padding: 80px 20px; }
    .login-container .form-wrapper { padding: 30px; }
    .login-container .form-wrapper h1 { font-size: 28px; }

    .login-container .error-message { font-size: 14px; }
 
}