* { margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #100f0c;
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#wrap {
  position: relative;
  line-height: 0;
}

canvas {
  width: min(100vw, calc(100vh * 1.5));
  height: min(100vh, calc(100vw / 1.5));
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  cursor: none;
  background: #100f0c;
}

/* CRT-ish scanlines + vignette over the upscaled canvas */
#wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.42) 100%);
}