html,
body {
  min-height: 100%;
  background: #000 !important;
}

body {
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    #000 url("/assets/erix-room-background.png") center bottom / cover no-repeat;
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.16);
  pointer-events: none;
}

#root {
  min-height: 100vh;
  position: relative;
  z-index: 1;
  background: transparent !important;
}

#app,
.route-view,
.hero-section,
.log-page-shell,
.about-page-shell {
  background: transparent !important;
}

main.about-page-shell.route-view,
body .about-page-shell {
  background-color: transparent !important;
  background-image: none !important;
}

body[data-uiverse-route="home"] .hero-section {
  --hero-text: #fff;
  --hero-subtle: rgba(255, 255, 255, 0.88);
  --hero-muted: rgba(255, 255, 255, 0.76);
  --hero-line: rgba(255, 255, 255, 0.58);
  background-color: transparent !important;
  background-image: none !important;
}

.hero-video,
.hero-atmosphere,
.log-page-bg {
  display: none !important;
}

.hero-fade {
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.1) 0%,
      rgba(0, 0, 0, 0.22) 58%,
      rgba(0, 0, 0, 0.48) 100%
    ) !important;
}

@media (max-width: 767px) {
  body::before {
    background-position: 58% bottom;
  }
}