/* Ensure the page takes up the full viewport */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Center content (your canvas) using Flexbox */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #222; /* Optional: a dark background to help the canvas stand out */
}

/* Make #canvas always square and sized relative to the viewport,
   and use image-rendering properties to keep pixel art crisp */
#canvas {
  /* Use vmin to size the canvas based on the smaller of viewport width or height */
  width: 80vmin;
  height: 80vmin;

  /* Force browsers to render scaled images with sharp edges */
  image-rendering: pixelated; /* Chrome, Safari, newer Edge */
  image-rendering: crisp-edges; /* Firefox */

  /* Optional styling for visualization */
  background: #f0f0f0;
  border: 2px solid #ccc;
}