body.login {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 26px;
  background:
    radial-gradient(
      ellipse at 80% 16%,
      rgba(244, 179, 35, 0.21),
      transparent 31%
    ),
    radial-gradient(
      ellipse at 10% 82%,
      rgba(201, 31, 45, 0.13),
      transparent 34%
    ),
    linear-gradient(135deg, #fffaf0, #f2e8d9);
  font-family:
    Inter,
    "Avenir Next",
    Avenir,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}
body.login #login {
  width: min(100%, 410px);
  padding: 32px 30px 28px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 28px;
  background: rgba(255, 252, 247, 0.79);
  box-shadow: 0 28px 80px rgba(90, 35, 38, 0.14);
  backdrop-filter: blur(22px);
}
body.login #login h1 {
  margin-bottom: 21px;
}
body.login #login h1 a {
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  padding: 8px 0 13px;
  background: none !important;
  text-indent: 0;
  overflow: visible;
  color: #302522;
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -1.7px;
  line-height: 1.15;
  text-decoration: none;
}
body.login #login h1 a:before {
	content: "";
	display: inline-grid;
	width: 48px;
	height: 48px;
	place-items: center;
	margin-right: 11px;
	border: 1px solid rgba(201, 31, 45, 0.15);
	border-radius: 15px;
	background: #fff url("../brand/quituve-logo.webp") center / contain no-repeat;
	box-shadow: 0 7px 18px rgba(102, 32, 39, 0.1);
	vertical-align: middle;
}
body.login #loginform,
body.login #lostpasswordform,
body.login #registerform {
  padding: 23px 21px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 12px 35px rgba(90, 35, 38, 0.07);
}
body.login label {
  color: #68534a;
  font-size: 12px;
  font-weight: 700;
}
body.login .input,
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
  min-height: 43px;
  margin-top: 5px;
  padding: 9px 12px;
  border: 1px solid rgba(90, 35, 38, 0.16);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: none;
  font-size: 14px;
}
body.login .input:focus,
body.login input:focus {
  border-color: #c91f2d;
  box-shadow: 0 0 0 3px rgba(201, 31, 45, 0.12);
}
body.login .button-primary {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #c91f2d;
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  text-shadow: none;
  box-shadow: 0 8px 18px rgba(145, 24, 35, 0.19);
}
body.login .button-primary:hover {
  background: #a71926;
}
body.login #nav,
body.login #backtoblog {
  text-align: center;
}
body.login #nav a,
body.login #backtoblog a {
  color: #70625b;
  font-size: 12px;
}
body.login #nav a:hover,
body.login #backtoblog a:hover {
  color: #c91f2d;
}
body.login .privacy-policy-page-link {
  margin-top: 16px;
}
body.login .message,
body.login #login_error {
  border-left-color: #c91f2d;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.87);
  box-shadow: 0 8px 20px rgba(90, 35, 38, 0.06);
}
body.login .language-switcher {
  margin-top: 12px;
}
body.login .language-switcher label {
  color: #70625b;
}
body.login .language-switcher select {
  border-radius: 9px;
  border-color: rgba(90, 35, 38, 0.16);
}
@media (max-width: 480px) {
  body.login {
    padding: 16px;
  }
  body.login #login {
    padding: 24px 18px 20px;
  }
  body.login #loginform,
  body.login #lostpasswordform,
  body.login #registerform {
    padding: 19px 15px;
  }
}
