html {
  background: white;
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: monospace;
}

p {
  margin: 0;
}

canvas {
  display: block;
  position: absolute;
  bottom: 50%;
  right: 50%;
  max-width: calc(100% - 64px);
  max-height: calc(100% - 64px);
  aspect-ratio: 9/16;
  transform: translate(50%, 50%);
  border-radius: 36px;
  box-shadow: 0px 0.8px 2.2px rgba(0, 0, 0, 0.042),
    0px 1.5px 5.3px rgba(0, 0, 0, 0.061), 0px 1.9px 10px rgba(0, 0, 0, 0.075),
    0px 2.2px 17.9px rgba(0, 0, 0, 0.089), 0px 2.6px 33.4px rgba(0, 0, 0, 0.108),
    0px 4px 80px rgba(0, 0, 0, 0.15);
  opacity: 0;
}

@media (aspect-ratio: 1/1) {
  canvas {
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: none;
  }
}

#render-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;

  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  background: rgba(0, 0, 0, 0.8);
  color: white;

  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

#render-overlay.show {
  display: flex;
}

.render-message {
  padding-bottom: 1em;
}

#render-percent {
  font-size: 1.2em;
}

.render-message::after {
  content: 'Rendering';
  font-size: 1rem;
  /* font-weight: bold; */
  /* text-transform: uppercase; */
  letter-spacing: 0.15rem;
}

#error {
  position: absolute;
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  text-align: center;
  width: 100%;
  max-width: 520px;
  font-size: 16px;
  display: none;
  line-height: 2;
}