.shinylive-viewer .loading-wrapper {
  font-family: monospace;
  font-size: 2vw;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 75vw;
  transform: translate(-50%, -50%);
  text-align: center; /* Center the text horizontally */
}

.shinylive-viewer .loading-wrapper .loading-animation {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.shinylive-viewer .loading-wrapper::before {
  content: "";
  white-space: pre;
  overflow: hidden;
  animation: change-content 120s, typing 9s steps(30, end) 12.5;
  display: inline-block;
  vertical-align: middle;
}

@keyframes typing {
  0% { width: 0% }
  33% { width: 100% }
  80% { width: 0% }
  100% { width: 0% }
}

@keyframes change-content {
	0%, 5.45%, 100% {content:	"Welcome to SafeHub-Mapper!";}
  12.5% {content: "This version is built with WebAssembly!";}
  20% {content: "Once loaded, SafeHub-Mapper will run locally in your browser!";}
  28.5% {content: "With no need for a server, you'll have better performance";}
  33.5% {content: "There won't be any server congestion or lag spikes";}
  /* Dumb as this looks, we need to have the message appear, but not give the next one too much duration */
  35% {}
  42% {content: "File upload will be immediate as you simply fetch from disk";}
  49% {content: "You can even work offline for some applications!";}
  53% {}
  57% {content: "Some heatmap applications don't yet support WebAssembly";}
  65% {content: "And you always have the option of using a server version!";}
  67% {}
  73% {content: "Thank you for being patient..."}
  80% {content: "We're almost there..."}
  85% {content: "Probably downloading Scipy..."}
}