/* 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: 100%;
  height: auto;
  max-width: 1250px; /* Optional: set a maximum width for the canvas */
  max-height: 1250px; /* Optional: set a maximum height for the canvas */
  aspect-ratio: 1 / 1; /* Always keep the canvas square */  
  /* Force browsers to render scaled images with sharp edges */
  image-rendering: unset !important; /* Chrome, Firefox, Opera */
  image-rendering: unset !important; /* Safari */

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