.login-header {
  font-size: 18px;
  line-height: 24px;
}

#header {
  margin-bottom: 0 !important;
}

.login-header .navbar {
  padding: 10px 1.5rem;
  border-bottom: 1px solid var(--color-grey-2);
}

.login-header .navbar-nav .nav-link {
  font-weight: 600;
  padding: 20px 30px;
  color: var(--color-brand-dark);
  transition: color 0.4s,
    background-color 0.4s;
}

.login-header .navbar-nav .nav-link:hover {
  color: var(--color-brand-primary);
}

main {
  display: flex;
  align-items: center;
  background: linear-gradient(0deg, rgba(40, 40, 45, 0.25) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 100%);
}

.login-form {
  color: var(--color-brand-light);
  max-width: 450px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 2rem 3rem;
  background-color: var(--color-grey-5);
  border-radius: 25px;
  box-shadow: 3px 3px 3px #00000029;
}

.login-form input,
.login-form input:focus {
  background-color: var(--color-grey-3);
}

.login-form input:-webkit-autofill,
.login-form input:-webkit-autofill:hover,
.login-form input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--color-grey-3) inset !important;
}
.login-form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px var(--color-grey-3) inset,
    0 0 0 0.25rem var(--color-brand-primary-o25) !important;
}

@media (min-width: 576px) {
  .login-form button[type="submit"] {
    align-self: center;
    width: 250px;
  }
}