/* Splash screen */

.splash-screen {
  --bg: #f9fafb;
  --bg-dark: #070d19;

  background: var(--bg);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loaded .splash-screen {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
}

.splash-screen .logo {
  background-image: url(/favicon.ico);
  width: 40px;
  height: 40px;
  background-size: contain;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
 }

.splash-screen .spinner {
  width: 100px;
  height: 100px;
  background-image: url(/images/spinner.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

[data-bs-theme="dark"] .splash-screen {
  background: var(--bg-dark);
}