:root {
  --bg: black;

  --accent1: hsl(260 50% 60% / 1);
  --accent2: hsl(260 25% 30% / 1);

  --error1: hsl(340 30% 40% / 1);
  --error2: hsl(340 20% 25% / 1);

  --base1: hsl(260 10% 5% / 1);
  --base2: hsl(260 10% 10% / 1);
  --base3: hsl(260 10% 15% / 1);
  --base4: hsl(260 10% 20% / 1);
  --base5: hsl(260 10% 25% / 1);

  --font: white;

  --main-rows: 0;
  --main-cols: 0;
  --top-rows: 0;
  --left-cols: 0;
  --main-rows-fr: 0fr;
  --main-cols-fr: 0fr;
  --top-rows-fr: 0fr;
  --left-cols-fr: 0fr;
}

* {
  overscroll-behavior: none;
  user-select: none;
  font-family: Consolas, "Courier New", monospace;
}

body {
  margin: 0px;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background-color: var(--bg);
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  color: var(--font);
}

.grid {
  display: grid;
  /* gap: 2px; */
}

.cell {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0%;
  border: solid var(--bg) 1px;
  transition: background-color 0.25s;
}

#main > div.cell[data-mark="box"][data-box="true"] {
  background-color: var(--accent1);
}

#main > div.cell[data-mark="box"][data-box="false"] {
  background-color: var(--error1);
}

#main > div.cell[data-box][data-select="box"] {
  background-color: var(--accent2);
}
#main > div.cell[data-box][data-select="cross"],
#main > div.cell[data-box][data-select="uncross"] {
  background-color: var(--error2);
}

#main > div.cell[data-mark="cross"] {
  background-image: url("images/cross.svg");
  background-size: cover;
}

.full > .cell {
  background-color: var(--base5);
}

#container {
  grid-template-columns: var(--left-cols-fr) var(--main-cols-fr);
  grid-template-rows: var(--top-rows-fr) var(--main-rows-fr);
  width: 100vw;
  height: 100vh;
  max-width: calc(
    100vh *
      (
        (var(--left-cols) + var(--main-cols)) /
          (var(--top-rows) + var(--main-rows))
      )
  );
  max-height: calc(
    100vw *
      (
        (var(--top-rows) + var(--main-rows)) /
          (var(--left-cols) + var(--main-cols))
      )
  );
  aspect-ratio: calc(var(--left-cols) + var(--main-cols)) /
    calc(var(--top-rows) + var(--main-rows));
}

#top {
  grid-template-columns: repeat(var(--main-cols), 1fr);
  grid-column: 2;
}

.top-col {
  grid-template-rows: repeat(var(--top-rows), 1fr);
}

#left {
  grid-template-rows: repeat(var(--main-rows), 1fr);
  grid-row: 2;
}

.left-row {
  grid-template-columns: repeat(var(--left-cols), 1fr);
}

#main {
  grid-template-columns: repeat(var(--main-cols), 1fr);
  grid-template-rows: repeat(var(--main-rows), 1fr);
}

#corner {
  grid-template-columns: repeat(var(--left-cols), 1fr);
  grid-template-rows: repeat(var(--top-rows), 1fr);
  background-color: var(--base1);
}

#main > div {
  background-color: var(--base4);
}

.top-col > div,
.left-row > div {
  background-color: var(--base3);
}

#corner > div {
  background-color: var(--base2);
}