:root {
  color-scheme: only light;
  --oxblood: #4b0917;
  --bone: #eeeae0;
  --cobalt: #2147ff;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--oxblood);
}

body {
  overscroll-behavior: none;
}

.stage,
#foil,
.fallback-art {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stage {
  isolation: isolate;
  overflow: hidden;
  background: var(--oxblood);
}

#foil {
  z-index: 2;
  display: block;
  cursor: default;
  outline: none;
  touch-action: none;
}

.fallback-art {
  z-index: 1;
  overflow: hidden;
  background: var(--oxblood);
}

.fallback-art span {
  position: absolute;
  bottom: -0.03em;
  left: -0.04em;
  color: var(--bone);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
  font-size: 112vh;
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.82;
  transform: scaleX(0.56);
  transform-origin: left bottom;
  white-space: nowrap;
}

.fallback-art i {
  position: absolute;
  z-index: 2;
  right: -10%;
  bottom: -20%;
  left: -8%;
  height: 58%;
  background:
    linear-gradient(173deg, transparent 0 46%, rgb(255 255 255 / 93%) 47% 49%, transparent 51%),
    linear-gradient(168deg, #c8c5bf 0 24%, #11131b 27% 51%, #2147ff 56%, #07090e 68%);
  clip-path: polygon(4% 100%, 100% 0, 100% 72%, 0 100%);
  transform: rotate(-3deg);
  transform-origin: center;
}

.webgl-ready .fallback-art {
  visibility: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-aspect-ratio: 4 / 5) {
  .fallback-art span {
    top: -5%;
    bottom: auto;
    font-size: 76vh;
    transform: scaleX(0.34);
  }

  .fallback-art i {
    right: -75%;
    bottom: -5%;
    left: -30%;
    height: 55%;
    transform: rotate(-15deg);
  }
}