:root {
  --splash-bg-light: #fdfbf7;
  --splash-bg-dark: #1c1a18;
  --splash-bg: var(--splash-bg-light);
}

@media (prefers-color-scheme: dark) {
  :root {
    --splash-bg: var(--splash-bg-dark);
  }
}

html.dark-mode {
  --splash-bg: var(--splash-bg-dark);
}

html.light-mode {
  --splash-bg: var(--splash-bg-light);
}
 
html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--splash-bg);
  background-size: 100% 100%;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.contain {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.stretch {
  display: block;
  width: 100%;
  height: 100%;
}

.cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.bottomLeft {
  position: absolute;
  bottom: 0;
  left: 0;
}

.bottomRight {
  position: absolute;
  bottom: 0;
  right: 0;
}

#splash-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background-color: var(--splash-bg);
  opacity: 1;
  pointer-events: auto;
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.splash-img {
  display: none;
}

#splash-img-light {
  display: block;
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
  #splash-img-light {
    display: none;
  }

  #splash-img-dark {
    display: block;
  }
}

/* Explicit user preference overrides */
html.dark-mode #splash-img-dark {
  display: block !important;
}

html.dark-mode #splash-img-light {
  display: none !important;
}

html.light-mode #splash-img-light {
  display: block !important;
}

html.light-mode #splash-img-dark {
  display: none !important;
}

.splash-fade-out {
  opacity: 0 !important;
  pointer-events: none !important;
}