html, body {
  width: 100%;
  height: 100%;
}
body {
  display: grid;
  grid-template-rows: auto min-content;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
}
#clock {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  place-self: center;
  grid-area: 1 / 1 / 1 / 3;
}
#time {
  font-family: monospace;
  font-size: 15vw;
  margin: 0;
  place-self: center;
  grid-area: 2 / 1 / 2 / 3;
}
#status {
  font-family: sans-serif;
  margin: 8px;
  place-self: start;
  grid-area: 1 / 1 / 1 / 1;
}
#wake-lock {
  font-family: sans-serif;
  margin: 8px;
  align-items: center;
  justify-self: end;
  align-self: start;
  grid-area: 1 / 1 / 2 / 3;
}
svg g.numerals text {
  text-anchor: middle;
  dominant-baseline: middle;
  font-size: 10px;
  font-family: sans-serif;
  stroke: none;
}
svg {
  fill: black;
  stroke: black;
}
@media (prefers-color-scheme: dark) {
  svg {
    fill: white;
    stroke: white;
  }
}