/* =========================================================
   MISHMAR LOGIN PAGE
   ========================================================= */

.login-page {
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 40px 20px;

  background:
    radial-gradient(
      ellipse at 50% 0%,
      #0c2644 0%,
      #061529 34%,
      #020914 72%
    );
}


/* Login box */

.login-box {
  width: min(420px, 100%);

  padding: 45px 40px;

  text-align: center;

  background:
    linear-gradient(
      145deg,
      rgba(13,39,67,.88),
      rgba(3,12,25,.92)
    );

  border: 1px solid rgba(200,168,90,.28);

  box-shadow:
    0 20px 60px rgba(0,0,0,.35);
}


/* Title */

.login-box h1 {
  margin: 0;

  font-size: clamp(32px, 5vw, 48px);
}


/* Form */

#loginForm {
  margin-top: 35px;
}


/* Individual fields */

.login-field {
  margin-bottom: 22px;

  text-align: left;
}


/* Labels */

.login-field label {
  display: block;

  margin-bottom: 7px;

  color: #c9a95c;

  font: 700 11px/1.3 Arial,sans-serif;

  letter-spacing: .15em;

  text-transform: uppercase;
}


/* Inputs */

.login-field input {
  width: 100%;

  min-height: 44px;

  padding: 10px 12px;

  color: var(--white);

  background: rgba(2,9,20,.75);

  border: 1px solid rgba(174,185,201,.35);

  border-radius: 0;

  font: 15px Arial,sans-serif;

  outline: none;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}


/* Focus */

.login-field input:focus {
  border-color: var(--gold);

  box-shadow:
    0 0 0 1px rgba(200,168,90,.2);
}


/* Login button */

.login-button {
  width: 100%;

  margin-top: 8px;

  cursor: pointer;
}


/* Mobile */

@media(max-width:700px) {

  .login-page {
    padding: 25px 14px;
  }

  .login-box {
    padding: 35px 22px;
  }

}