@counter-style relief {
  symbols: "100m" "200m" "300m" "400m" "500m";
}

:root {
  font-family: Helvetica, Arial, sans-serif;
  
  --white: #fff;
  --light: #ddd;
  --dark:  #222;
  --base:  #030;
  --over:  #fff2;
  --line:  #fff4;
  --hill:  #0606;
  --blue:  #0066;
  --grid:  #8886;

  --fade: 0.5;

  --edge:  1px;
  --tweak: calc(-1 * --edge);
  --gap:   8px;
  --cell:  30px;
  --shift: calc(var(--cell) - var(--edge));
  --size:  calc(10 * var(--cell));
  --half:  calc(5 * var(--cell));

  counter-set:
    row 0
    col 0
    relief 0
  ;

  color: var(--light);
  background-color: var(--dark);
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

main {
  position: relative;
  width: var(--size);
  height: var(--half);
  border: var(--edge) solid var(--white);
  border-radius: var(--gap);
  box-sizing: border-box;
  background-color: var(--base);
  overflow: hidden;
}

/* Animated Grid < > Relief checkbox */
label {
  /* Local custom CSS properties */
  --size: 1em;
  --width: calc(2 * var(--size));
  --color: #fff8;
  --nudge: 4px;
  position: absolute;
  z-index: 1;
  bottom: var(--nudge);
  left: var(--nudge);
  color: var(--color);
}
label::before {
  content: "Grid"
}
label::after {
  content: "Relief"
}
input {
  position: absolute;
  left: -999vw;
}
input + span {
  position: relative;
}
input + span::before,
input + span::after {
  content: ".";
  display: inline-block;
  width: var(--width);
  height: var(--size);
  border-radius: var(--size);
  border: var(--edge) solid white;
  box-sizing: border-box;
  opacity: var(--fade);
}
input + span::after {
  position: absolute;
  width: var(--size);
  background-color: var(--white);
  border-color: transparent;
  left: 0;
  transition: left 0.2s
}
input:checked + span::after {
  left: var(--size)
}

/* Switch between Grid and Relief */
label:has(:checked) ~ .col-1 {
  pointer-events: none;
  opacity: var(--fade);
}

label:has(:checked) ~ .contour,
label:has(:checked) ~ .contour div {
  border-color: var(--line);
}

/* Hill and sea */
div[class|=hill] {
  position: absolute;
  right: var(--shift);
  top: 0;
  width: var(--size);
  height: var(--half);
  border-radius: 50%;
  background-color: var(--hill);
  border: var(--edge) solid var(--over);
}
div[class|=hill]:hover {
  counter-increment: relief;
}
div.hill-1 {
  right: var(--half);
}

div[class|=sea] {
  position: absolute;
  left: var(--cell);
  top: 0;
  width: var(--half);
  border: var(--edge) solid var(--over);
}
div[class|=sea]:hover {
  counter-increment: relief;
}
div[class|=sea] {
  position: absolute;
  left: var(--shift);
  top: 0;
  width: var(--size);
  height: var(--half);
  border-radius: 50%;
  background-color: var(--blue);
}
div.sea-1 {
  background-color: #00c;
  left: var(--half);
}

/* Show relief when grid is disactivated */
p.relief {
  text-align: center;
  pointer-events: none;
  margin: 0.5em 0;
  opacity: var(--fade);
}
p.relief::before {
  content: "Height: " counter(relief, relief);
  display: none;
}
p.relief::after {
  content: "Depth: " counter(relief, relief);
  display: none;
}
.hill-1:hover ~ p.relief::before {
  display: inline;
}
.sea-1:hover ~ p.relief::after {
  display: inline;
}

/* Columns and rows */
div[class^=col] {
  position: absolute;
  top: 0;
  left: var(--shift);
  width: var(--cell);
  height: var(--size);
  border-left: var(--edge) dashed var(--grid);
  box-sizing: border-box;
}
div[class^=col]:hover {
  counter-increment: col;
}
div.col-1{
  left: var(--tweak); /* - edge, to account for main border */
}

div[class^=row] {
  position: relative;
  top: var(--shift);
  width: var(--size);
  height: var(--size);
  border-top: var(--edge) dotted  var(--grid);
  box-sizing: border-box;
}
div.row-1 {
  left: var(--tweak); /* accounts for main border */
  top: var(--tweak);
}
div[class^=row]:hover {
  counter-increment: row;
}

div[class^=row]::before {
  content: counter(col, upper-alpha) counter(row);
  position: absolute;
  width: var(--cell);
  line-height: var(--cell);
  text-align: center;
  background-color: var(--over);
  display: none;
}

/* Show a label for the hovered cell... */
div[class^=row]:hover::before {
  display: inline-block;
}
/* ...but not for all the cells in the parent rows */
div[class^=row]:has(:hover)::before {
  display: none;
}

/* Show the GitHub logo */
a.github {
  width: 0;
  height: 0;

  img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 28px;
    height: 28px;
    filter: grayscale(1);
    opacity: 0.25;

    &:hover {
      opacity: 1;
    }
  }
}