:root {
  --spacing: 1em;

  color-scheme: dark;
}

body {
  background: black;
  margin: 0;
}

#clock {
  height: 100svmin;
  display: block;
  margin: 0 auto;
  transition: color 1s;
  color: white;
  --wobble: 1;
  --wobble-scale: 1;
}

#clock.near {
  color: orange;
}
#clock.over {
  color: red;
}

#clock.paused {
  opacity: 0.5;
}

#clock.paused #outline {
  stroke-dasharray: 3.14159 3.14159;
}

text {
  fill: currentColor;
  stroke: #222;
  stroke-width: 2px;
  paint-order: stroke fill;
  font-family: monospace;
  font-size: 20px;
}
.over text {
  font-weight: bold;
  animation: wobble 0.2s infinite alternate-reverse ease-in-out;
}

@keyframes wobble {
  0% {
    transform: rotate(calc(-1deg * var(--wobble-scale) * var(--wobble)));
  }

  100% {
    transform: rotate(calc(1deg * var(--wobble-scale) * var(--wobble)));
  }
}

#outline {
  stroke: currentColor;
}

.over #outline {
  fill: currentColor;
  mix-blend-mode: exclusion;
  animation: flash 2s infinite;
}

@keyframes flash {
  0% {
    opacity: 1;
  }

  49% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

#arc {
  mix-blend-mode: exclusion;
  fill: currentColor;
}

.tick {
  stroke: currentColor;
  fill: none;
}