* {
  font-family: helvetica, arial, sans-serif;
}

body {
  height: 100vh;
  --size: 50px;
  background: #ccc;
  margin: 20px;
}

#zoom {
  cursor: pointer;
}

canvas {
  /* width: var(--size); */
  margin: 10px 0;
  /* Keep pixel art looking pixelated */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;

  /* image-rendering: -moz-crisp-edges; /* Firefox */
  /* image-rendering: -o-crisp-edges; /* Opera */
  /* image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
  /* image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}