/*
  const root = document.documentElement;
  root.style.setProperty('--grid-width', '600px');
  root.style.setProperty('--cells-wide', '4');
 */

:root {
  --grid-width: 600px;
  --cells-wide: 16;
}

body {
  /* The font-family stack */
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  /* Set a default font weight */
  font-weight: 400;

  /* Optional: Improve font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

fieldset {
  max-width: var(--grid-width);
}

div#grid {
  display: flex;
  gap: 0rem;
  flex-direction: column;
  border: black solid 1px;
  max-width: var(--grid-width);
}

div#grid .row {
  display: flex;
  gap: 0rem;
}

div#grid .cell {
  min-width: calc(var(--grid-width) / var(--cells-wide));
  min-height: calc(var(--grid-width) / var(--cells-wide));
}