@font-face {
  font-family: "Luckiest Guy";
  src: url("assets/fonts/LuckiestGuy.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Creepster";
  src: url("assets/fonts/Creepster.woff2") format("woff2");
  font-display: block;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #000; /* the letterbox */
  overflow: hidden;
  cursor: none;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
}
canvas {
  display: block;
}

/* ?labels=1: printable bowl labels */
body.labels {
  display: block;
  height: auto;
  overflow: auto;
  background: #fff;
  cursor: auto;
}
.label {
  text-align: center;
  padding: 24px;
  break-after: page;
}
.label canvas {
  display: inline-block;
  width: min(80vw, 640px);
  height: auto;
}
.label h1 {
  margin: 8px 0 0;
  font: 72px "Luckiest Guy", Impact, sans-serif;
  color: #0b0b0b;
}