index.css

html,
body {
  -webkit-tap-highlight-color: transparent;

  width: 100%;
  height: 100%;
  overflow: hidden;
}

#app {

  position: fixed;
  inset: 0;

  width: 100%;
  height: 100%;
}

.global-gui {
  z-index: 999 !important;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;

  background-color: rgb(0, 0, 0);
  opacity: 1;
  z-index: 20000;

  display: flex;
  flex-direction: column;
  gap: 4rem;

  justify-content: center;
  align-items: center;

  font-size: 2rem;
  font-family: monospace;
  color: white;
}

.hidden {
  animation-delay: 1s;
  animation: fadeOut 1s ease-in-out forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Loader from: https://cssloaders.github.io/ */
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  animation-fill-mode: both;
  animation: bblFadInOut 1.8s infinite ease-in-out;
}

.loader {
  color: #fff;
  font-size: 7px;
  position: relative;
  text-indent: -9999em;
  transform: translateZ(0);
  animation-delay: -0.16s;
}

.loader:before,
.loader:after {
  content: "";
  position: absolute;
  top: 0;
}

.loader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}

.loader:after {
  left: 3.5em;
}

@keyframes bblFadInOut {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}