:root {
  --bg: white;
  --fg: #222;
  --fg-shadow: #224;
  --fg-muted: #666;
  --bg-muted: #eee;
  --bg-slightly-muted: #f8f8f8;
  --fg-code: var(--fg);
  --bg-code: rgba(231, 231, 231, .5);
  --fg-pre: var(--fg);
  --bg-pre: #ddf;
  --border-pre: #006;
  --fg-link: blue;
  --fg-visited: purple;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: black;
    --fg: #ddd;
    --fg-muted: #888;
    --bg-muted: #222;
    --bg-slightly-muted: #111;
    --bg-code: #112;
    --bg-pre: #112;
    --border-pre: #888;
    --fg-link: #88e;
    --fg-visited: #e8e;
  }
}

:root {
  color: var(--fg);
  background: var(--bg);
}
:link {color: var(--fg-link);}
:visited {color: var(--fg-visited);}
pre, code {
  color: var(--fg-code);
  background: var(--bg-code);
}

html { height: 100%; margin: 0}
body {
  min-height: 100%;
  margin: 0;
  font-family: sans-serif;
  display: grid;
  grid-template-rows: min-content minmax(0, 1fr) min-content;
  justify-items: center;
}

h1 {
  font-style: italic;
  text-align: center;
}

svg {
  min-height: 200px;
  max-height: 70vh;
  --s: calc(1*6 + 0);
  --m: calc(2*6 + 0);
  --h: calc(3*6 + 4);
  --time: calc(var(--h) * 36 * 36 + var(--m) * 36 + var(--s));
}
.time {
  font-size: 10vh;
  text-align: center;
}

.face {
  fill: none;
  stroke: var(--fg);
  stroke-width: .02px;
  stroke-dasharray: 1 9;
  transform: rotate(-90deg);
}

text {
  font-size: .2px;
  text-anchor: middle;
  transform: translateY(.08px) rotate(calc(var(--num) * 1turn / 6)) translateY(-.85px) rotate(calc(var(--num) * -1turn / 6));
  fill: var(--fg);
}
.l1 { --num: 1; }
.l2 { --num: 2; }
.l3 { --num: 3; }
.l4 { --num: 4; }
.l5 { --num: 5; }
.l0 { --num: 0; }

.hand {
  fill: none;
  stroke: var(--fg);
  stroke-opacity: .9;
  stroke-linecap: round;
  z-index: -1;
}

.hand.big-hour {
  stroke-width: .15px;
  transform: rotate(calc(var(--time) / (36 * 36 * 6) * 1turn / 6));
}
.hand.small-hour {
  stroke-width: .11px;
  transform: rotate(calc(var(--time) / (36 * 36) * 1turn / 6));
}
.hand.minute {
  stroke-width: .07px;
  transform: rotate(calc(var(--time) / 36 * 1turn / 36));
  stroke: blue;
}
.hand.second {
  stroke-width: .02px;
  transform: rotate(calc(var(--time) * 1turn / 36));
  stroke: red;
}

.ticks > circle {
  transform:rotate(calc(var(--n) * 1turn / 36))  translateY(-1px);
  fill: var(--fg);
  r: .01px;
}

.huh {
  margin: 1em auto;
  max-width: 50em;
  line-height: 1.2;
}
.huh summary {
  text-align: center;
}