style.css

html, body {
  width: 100dvw;
  height: 100dvh;
  overscroll-behavior-y: none; /* Prevent vertical scroll "bounce" in some browsers */
  margin: 0;
  padding: 0;
  font-family: 'Arial Unicode', 'Arial', sans-serif;
}
body {
  background: #000000;
}
#container {
  display: flex;
  align-items: center;
  justify-content: center;
}
#svg, #container {
  width: 100%;
  height: 100%;
}
/* Hide SVG to avoid flash of unstyled content */
#svg {
  margin: 2vw;
}
#svg, #svg.hide {
  visibility: hidden;
  opacity: 0;
}
#svg.show {
  visibility: visible;
  opacity: 1;
}
#svg.dim {
  visibility: visible;
  opacity: 0.6;
}
text {
  fill: #FFFFFF;
  paint-order: stroke;
  user-select: none; /* Good: this means you can drag your mouse to flip the page without inadvertently selecting text. Bad: you can't select the text. */
}
#info {
  visibility: hidden;
  position: absolute;
  bottom: 1vw;
  left: 1vw;
}
#info a {
  color: #FFFFFF;
  text-decoration: none;
}