:root {
  --spacing: 1em;

  color-scheme: light dark;

  --bg-hue: 210;
  --bg-lum: 60%;

  --hand-hue: calc(180 + var(--bg-hue));
  --big-hand-lum: 15%;
  --small-hand-lum: 50%;
  --dots-lum: 90%;
}

a {
  filter: saturate(0%);
  font-family: sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-lum: 20%;
    --big-hand-lum: 90%;
    --small-hand-lum:60%;
    --dots-lum: 15%;
  }
}

body {
  margin: 0;
  background: hsl(var(--bg-hue),60%,var(--bg-lum));
  display: grid;
  justify-items: center;
  grid-template: 1fr auto / 1fr;
  height: 100svh;
  overflow: hidden;
}

#board {
    width: 100%;
    height: 100%;
}
main {
    height: 100%;
}

path {
  stroke: hsl(var(--hand-hue),50%,var(--lum));
}

#big-hand {
  --lum: var(--big-hand-lum);
}

#small-hand {
  --lum: var(--small-hand-lum);
}

#dots {
  --lum: var(--dots-lum);
}