*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  margin: 0;
  min-height: 100%;
  width: 100%;
}

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #6b21a8;
  background-color: #fffdef;
  display: flex;
  flex-direction: column;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url('/images/bg_desktop.webp') center / cover no-repeat;
  pointer-events: none;
}

@media (max-width: 768px) {
  body::before {
    background-image: url('/images/bg_mobile.webp');
  }
}

#root {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

html:not(.app-ready) #root {
  opacity: 0;
}

html.app-ready #root {
  opacity: 1;
  transition: opacity 0.3s ease;
}