:root {
  color-scheme: light;
  background:
    radial-gradient(circle at top, rgba(52, 151, 42, 0.28) 0%, rgba(52, 151, 42, 0) 26%),
    radial-gradient(circle at center, #277816 0%, #005d1f 100%);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top, rgba(52, 151, 42, 0.28) 0%, rgba(52, 151, 42, 0) 26%),
    radial-gradient(circle at center, #277816 0%, #005d1f 100%);
  background-repeat: no-repeat;
  background-size: cover;
}

#root {
  min-height: 100vh;
}

#boot-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 2rem;
  background:
    radial-gradient(circle at top, rgba(52, 151, 42, 0.28) 0%, rgba(52, 151, 42, 0) 26%),
    radial-gradient(circle at center, #277816 0%, #005d1f 100%);
  background-repeat: no-repeat;
  background-size: cover;
  transition:
    opacity 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 420ms linear;
}

#boot-loader[data-state='exiting'] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot-spinner {
  position: relative;
  width: 52px;
  height: 52px;
  transform: scale(1);
  transform-origin: center;
}

.boot-spinner::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border: 6px solid rgba(255, 255, 255, 0.4);
  border-right-color: transparent;
  border-radius: 999px;
  animation: boot-spin 0.85s linear infinite;
}

#boot-loader[data-state='exiting'] .boot-spinner {
  animation: boot-spinner-exit 180ms cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes boot-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes boot-spinner-exit {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  35% {
    opacity: 1;
    transform: scale(1.08);
  }

  100% {
    opacity: 0;
    transform: scale(0);
  }
}