/* Shared WatchTower backdrop for public, authentication, demo and dashboard pages. */
html:root {
  min-height: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: #020005 !important;
}

/*
 * Keep every decorative layer on the document background. This prevents the
 * ambient points from covering navigation, controls, text or modal content.
 * `cover` preserves the nebula artwork's proportions while filling ultrawide,
 * laptop and portrait viewports without seams or repetition.
 */
html:root > body {
  min-height: 100%;
  max-width: 100%;
  overflow-x: clip;
  background-color: #020005 !important;
  background-image:
    radial-gradient(circle at 17px 23px, rgba(34, 233, 255, .22) 0 1px, transparent 1.7px),
    radial-gradient(circle at 53px 41px, rgba(208, 44, 255, .18) 0 1px, transparent 1.8px),
    linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .34) 42%, rgba(0, 0, 0, .52)),
    url('/assets/flarocity/system-pages/background-watchtower-nebula.webp') !important;
  background-size: 109px 127px, 163px 181px, cover, cover !important;
  background-position: 0 0, 29px 47px, center center, center center !important;
  background-repeat: repeat, repeat, no-repeat, no-repeat !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
}

@media (max-width: 720px) {
  html:root > body {
    /* Keep the brightest part of the artwork in view on portrait screens. */
    background-position: 0 0, 29px 47px, center center, 58% center !important;
  }
}