html,
body {
  min-height: 100%;
  background-color: ghostwhite !important;
  background-image: radial-gradient(circle, lightsteelblue 1px, ghostwhite 1px) !important;
  background-size: 15px 15px !important;
  background-attachment: fixed !important;
}

@media (prefers-color-scheme: dark) {
  html,
  body {
    background-color: hsl(0 0% 10%) !important;
    background-image: radial-gradient(circle, hsl(0 0% 14%) 1px, hsl(0 0% 10%) 1px) !important;
  }
}


html {
  --palette-1: #ff0026;
  --palette-2: #d91e4d;
  --palette-3: #ff0094;
  --palette-4: #e000ff;
  --palette-5: #ff5a00;
}

body,
#body,
.hero.is-fullheight,
.hero.is-fullheight-with-navbar {
  background-color: transparent !important;
  background-image: none !important;
}

/* Registered/Login.vue's <h3 class="title ..."> wraps both the logo
   (logoSrc falls back to a bundled default icon whenever
   window.config.logoUrl is falsy -- and both configs below set it
   to "", which *is* falsy in JS, so it never actually suppressed
   anything) and the "{{ appName }}" text ("0ff.space chat"). Hiding
   the whole heading removes both and brings the "Login" subtitle
   right below it up to the top of the box, directly above the
   fields. The four stacked classes are specific enough to this one
   element that this shouldn't catch any other heading. Guest/
   Login.vue (plaza) has no equivalent heading, so this is a no-op
   there. */
.title.has-text-grey.is-flex.is-justify-content-center.is-align-items-center {
  display: none !important;
}

/* The "Login" subtitle right below the (now-hidden) heading is
   redundant with the bold "Login" submit button further down the
   same form -- it doesn't mean "you're not logged in", it's just
   the form's own label. */
form > p.subtitle.has-text-grey {
  display: none !important;
}