:root {
  --loading-footer-height: 64px;
  --loading-design-size: min(100vw, calc(100vh - var(--loading-footer-height)));
  --loading-design-left: calc((100vw - var(--loading-design-size)) / 2);
  --loading-design-top: calc((100vh - var(--loading-footer-height) - var(--loading-design-size)) / 2);
}

html,
body,
#canvas,
.btw-app {
  background: #174b96;
}

.btw-container .btw-content {
  position: relative;
  padding: 0;
  background: #174b96 url("./static_background.png") center / cover no-repeat;
}

#status {
  position: absolute;
  inset: 0;
  width: 100%;
}

#status-splash {
  position: absolute;
  top: calc(var(--loading-design-top) + var(--loading-design-size) * 140 / 844);
  left: calc(var(--loading-design-left) + var(--loading-design-size) * 192 / 844);
  width: calc(var(--loading-design-size) * 460 / 844);
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
}

#status::after {
  position: absolute;
  top: calc(var(--loading-design-top) + var(--loading-design-size) * 630 / 844);
  left: var(--loading-design-left);
  width: var(--loading-design-size);
  color: #fff;
  content: "Loading...";
  font: 700 calc(var(--loading-design-size) * 28 / 844) / 1.2 Arial, sans-serif;
  text-align: center;
}

#status-progress {
  position: absolute;
  top: calc(var(--loading-design-top) + var(--loading-design-size) * 684 / 844);
  left: calc(var(--loading-design-left) + var(--loading-design-size) * 192 / 844);
  width: calc(var(--loading-design-size) * 460 / 844);
  height: calc(var(--loading-design-size) * 18 / 844);
  margin: 0;
  border: 0;
  border-radius: calc(var(--loading-design-size) * 20 / 844);
  background: #ffffff33;
  overflow: hidden;
}

#status-progress span {
  height: 100%;
  border-radius: calc(var(--loading-design-size) * 9 / 844);
  background: #7ea6df;
}

@media (max-width: 500px) {
  :root {
    --loading-footer-height: 56px;
  }
}