html, body {
  background-color: black;
  color: white;
  margin:0;
  padding:0;
  overflow:hidden;
}

:root {
  --cell-edge-width-a: 0.02;
  --cell-edge-width-b: 0.05;
  --cell-edge-width-c: 0.09;
  --colour-base: hsl(0, 0%, 40%);
  --colour-highlight-regions: hsl(20, 15%, 45%);
  --colour-highlight-boundary: rgb(140, 140, 255);
}

svg {
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  fill: black;
  stroke: white;
  stroke-linecap: round;
}

text {
  fill: white;
}

.cell {
  stroke-width: var(--cell-edge-width-a);
  fill: none;
  stroke: var(--colour-base);
}

.edge-region-row,
.edge-region-column,
.edge-region-up,
.edge-region-down,
.edge-region-line {
  stroke-width: var(--cell-edge-width-a);
  stroke: var(--colour-base);
}

.edge-region-hexagon,
.edge-region-box {
  stroke-width: var(--cell-edge-width-b);
  stroke: var(--colour-base);
}

.edge-region-board {
  stroke-width: var(--cell-edge-width-c);
  stroke: var(--colour-base);
}

.noedge {
  stroke-width: 0;
  fill: black;
  fill-opacity: 0;
  stroke: black;
  stroke-opacity: 0;
}

.touch {
  stroke-width: var(--cell-edge-width-a);
  fill: black;
  fill-opacity: 0;
  stroke: black;
  stroke-opacity: 0;
}

.highlight {
  stroke: var(--colour-highlight-regions);
  stroke-opacity: 0.6;
  fill: white;
  fill-opacity: 0.07;
}

.highlight-cell {
  stroke: var(--colour-highlight-regions);
  fill-opacity: 0.03;
}

.highlight-edge {
  stroke: var(--colour-highlight-boundary);
  stroke-opacity: 0.6;
}

.highlight-vertex {
  fill: var(--colour-highlight-boundary);
  fill-opacity: 0.3;
}