#body-content {
  display: none;
}

#header {
  width: MIN(80em, 100vw);
  margin: 0 auto;
  text-align: center;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 6em;
  margin: 1em auto;
  text-align: center;
}

.splash {
  opacity: 1;
  display: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.splashimage {
  display: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-size: MIN(50vh, 50vw) auto;
  overflow: hidden;
  background-color: #8c93cc;
  background-image: url("/sys/css/img/ayballM.webp");
  background-repeat: no-repeat;
}

.splashout {
  opacity: 0;
  transition: all 0.8s;
}

@media (prefers-color-scheme: light) {
  #broser,
  #tabbrowser-tabpanels,
  :root,
  #webview-container,
  main {
    background-color: #130a0a;
  }

  body {
    display: block !important;
    background-color: #130a0a;
  }

  .backEndBody {
    display: block;
    background-color: #130a0a;
  }
}

@media (prefers-color-scheme: dark) {
  #broser,
  #tabbrowser-tabpanels,
  :root,
  #webview-container,
  main {
    background-color: #cccccc;
  }

  body {
    display: block !important;
    background-color: #cccccc;
  }

  .backEndBody {
    display: block;
    background-color: #cccccc;
  }
}