:root {
  --ms-ink: #362b25;
  --ms-earth: #564238;
  --ms-clay: #c76d3c;
  --ms-sand: #f5eadc;
  --ms-paper: #fffdf9;
}

body,
main.view,
main.view > md-content {
  background: radial-gradient(circle at 12% 12%, #f3e3d2 0, transparent 35%),
              linear-gradient(145deg, #fffdf9 0%, #eee3d8 100%) !important;
}

#loginContent {
  border: 1px solid rgba(54, 43, 37, .09);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(54, 43, 37, .18) !important;
  margin: clamp(24px, 8vh, 90px) auto;
  max-height: 620px;
  max-width: 1120px;
  min-height: 520px;
  overflow: hidden;
}

#loginContent .sg-logo {
  align-items: center;
  background: linear-gradient(150deg, var(--ms-ink), var(--ms-earth));
  display: flex;
  justify-content: center;
}

#loginContent .sg-logo > div { justify-content: center; width: 100%; }
#loginContent .sg-logo .md-flex { display: none !important; }

#loginContent .sg-logo img {
  background: rgba(255, 253, 249, .97);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .2);
  box-sizing: border-box;
  max-width: 470px;
  padding: 22px 26px;
  width: 84%;
}

#loginContent .sg-login { background: var(--ms-paper) !important; color: var(--ms-ink) !important; }
#loginContent .sg-login-content { margin: auto; max-width: 440px; padding: 54px 56px; }
#loginContent md-button.md-fab { background: var(--ms-clay) !important; }
#loginContent button[aria-label="About"] { visibility: hidden; }
#loginContent md-input-container.md-input-focused label,
#loginContent md-input-container.md-input-focused md-icon,
#loginContent md-switch.md-checked .md-label { color: var(--ms-clay) !important; }
#loginContent md-input-container.md-input-focused .md-input { border-color: var(--ms-clay) !important; }

@media (max-width: 959px) {
  #loginContent { border-radius: 0; margin: 0; max-height: none; min-height: 100%; }
  #loginContent .sg-logo { min-height: 190px; }
  #loginContent .sg-logo img { max-width: 370px; }
}