@font-face {
  font-family: prstart;
  src: url('../fonts/prstart.ttf');
}
body {
  font-family: prstart;
  font-size: 16px;
  background-color: black;
  margin-top: 30px;
}
#main {
  margin: 0 auto;
  width: 512px;
  color: white;
}
#canvas {
  display: block;
  image-rendering: pixelated;
}
#main.display-zoom {
  align-items: center;
  background-color: black;
  display: flex;
  height: calc(100vh - 30px);
  justify-content: center;
  margin: 0;
  width: 100vw;
}
#main.display-zoom #canvas {
  height: min(calc(100vh - 30px), calc(100vw * 7 / 8));
  width: min(100vw, calc((100vh - 30px) * 8 / 7));
}
#main.display-zoom #help {
  display: none;
}
#help {
  border-top: 4px solid white;
  margin-top: 10px;
  padding-top: 7px;
}
#help img {
  vertical-align: middle;
}
#help td {
  padding-left: 1em;
}
#help .control-subitem {
  padding-left: 2em;
}