body.login {
  --twl-login-bg: #0b0f14;
  --twl-login-form-bg: rgba(14, 18, 24, 0.78);
  --twl-login-footer-bg: rgba(14, 18, 24, 0.62);
  --twl-login-button: #c9ac8c;
  --twl-login-button-text: #111111;
  --twl-login-bg-image: none;
  --twl-login-overlay-opacity: 0.58;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, var(--twl-login-overlay-opacity)), rgba(12, 24, 31, calc(var(--twl-login-overlay-opacity) + 0.12))),
    var(--twl-login-bg-image),
    var(--twl-login-bg);
  background-size: cover;
  background-position: center;
  color: #f6f2ea;
  font-family: "Poppins", sans-serif;
}

body.login div#login {
  width: min(420px, calc(100vw - 2rem));
  padding: 4rem 0 2rem;
}

body.login h1 a {
  width: min(280px, 80%);
  height: 96px;
  background-size: contain;
  background-position: center;
  margin-bottom: 1.5rem;
}

body.login form {
  border: 1px solid rgba(255, 253, 248, 0.14);
  border-radius: 1.25rem;
  background: var(--twl-login-form-bg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
}

body.login label,
body.login .forgetmenot {
  color: #f6f2ea;
}

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"],
body.login input[type="tel"],
body.login input[type="number"] {
  border-radius: 0.8rem;
  border: 1px solid rgba(255, 253, 248, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #f6f2ea;
}

body.login .message,
body.login #login_error,
body.login .notice,
body.login .success,
body.login .error,
body.login .login-message,
body.login .two-factor-notice,
body.login .two-factor-prompt {
  margin: 0 0 1rem;
  border: 1px solid rgba(255, 253, 248, 0.14);
  border-left: 4px solid #c9ac8c;
  border-radius: 1rem;
  background: rgba(14, 18, 24, 0.88);
  color: #f6f2ea;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
}

body.login .message a,
body.login #login_error a,
body.login .notice a,
body.login .success a,
body.login .error a,
body.login .login-message a,
body.login .two-factor-notice a,
body.login .two-factor-prompt a {
  color: #f2d7b1;
}

body.login .button-primary {
  border: 0;
  border-radius: 999px;
  background: var(--twl-login-button);
  color: var(--twl-login-button-text);
  text-shadow: none;
  box-shadow: none;
  font-weight: 700;
}

body.login .wp-core-ui .button-secondary,
body.login .wp-core-ui .button,
body.login .wp-core-ui .button-link {
  color: #f6f2ea;
}

body.login #nav,
body.login #backtoblog {
  margin-left: 0;
  margin-right: 0;
  padding: 0.9rem 1rem;
  border-radius: 1rem;
  background: var(--twl-login-footer-bg);
  backdrop-filter: blur(14px);
}

body.login #nav a,
body.login #backtoblog a {
  color: #f6f2ea;
}
