html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #808080;
}

main {
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
  max-width: unset;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000000;
  mix-blend-mode: hard-light;
}

canvas {
  image-rendering: pixelated;

  display: block;
  object-fit: contain;
  width: 100%;
  height: 100%;
  aspect-ratio: auto 200/120;

  touch-action: none;
}

main::after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  content: '\25B6\FE0E';
  font-size: 20vmin;
  color: #ffffffff;
  text-shadow: 0 0 32px #000000;
  background: rgba(0, 0, 0, 0.75);
  transition: font-size 80ms ease-out;
  cursor: pointer;
}
main:hover::after {
  font-size: 24vmin;
}
main:active::after {
  font-size: 22vmin;
}
main.clicked::after {
  display: none;
}