.countdown {
  display: grid;
  margin: 1em auto;
  width: 20em;
  height: 20em;
}
.countdown::after {
  grid-column: 1;
  grid-row: 1;
  place-self: center;
  font: 5em/2 ubuntu mono, consolas, monaco, monospace;
  animation: num 60s steps(1) infinite;
  content: "0:" counter(s, decimal-leading-zero);
}

@keyframes num {
  0% {counter-reset: s 60;}
  1.6% {counter-reset: s 59;}
  3.2% {counter-reset: s 58;}
  4.8% {counter-reset: s 57;}
  6.4% {counter-reset: s 56;}
  8.1% {counter-reset: s 55;}
  9.7% {counter-reset: s 54;}
  11.3% {counter-reset: s 53;}
  12.9% {counter-reset: s 52;}
  14.5% {counter-reset: s 51;}
  16.6% {counter-reset: s 50;}
  18.2% {counter-reset: s 49;}
  19.8% {counter-reset: s 48;}
  21.4% {counter-reset: s 47;}
  23% {counter-reset: s 46;}
  24.7% {counter-reset: s 45;}
  26.3% {counter-reset: s 44;}
  27.9% {counter-reset: s 43;}
  29.5% {counter-reset: s 42;}
  31.1% {counter-reset: s 41;}
  32.7% {counter-reset: s 40;}
  34.3% {counter-reset: s 39;}
  35.9% {counter-reset: s 38;}
  37.5% {counter-reset: s 37;}
  39.1% {counter-reset: s 36;}
  40.8% {counter-reset: s 35;}
  42.4% {counter-reset: s 34;}
  45.0% {counter-reset: s 33;}
  46.6% {counter-reset: s 32;}
  48.2% {counter-reset: s 31;}
  49.8% {counter-reset: s 30;}
  51.4% {counter-reset: s 29;}
  53% {counter-reset: s 28;}
  54.6% {counter-reset: s 27;}
  56.2% {counter-reset: s 26;}
  57.9% {counter-reset: s 25;}
  59.5% {counter-reset: s 24;}
  61.1% {counter-reset: s 23;}
  62.7% {counter-reset: s 22;}
  64.3% {counter-reset: s 21;}
  65.9% {counter-reset: s 20;}
  67.5% {counter-reset: s 19;}
  69.1% {counter-reset: s 18;}
  70.7% {counter-reset: s 17;}
  72.3% {counter-reset: s 16;}
  74% {counter-reset: s 15;}
  75.6% {counter-reset: s 14;}
  77.2% {counter-reset: s 13;}
  78.8% {counter-reset: s 12;}
  80.4% {counter-reset: s 11;}
  82% {counter-reset: s 10;}
  83.6% {counter-reset: s 9;}
  85.2% {counter-reset: s 8;}
  86.8% {counter-reset: s 7;}
  88.4% {counter-reset: s 6;}
  90% {counter-reset: s 5;}
  91.6% {counter-reset: s 4;}
  93.2% {counter-reset: s 3;}
  94.8% {counter-reset: s 2;}
  96.4% {counter-reset: s 1;}
  98% {counter-reset: s 0;}
  
}
svg {
  grid-column: 1;
  grid-row: 1;
}

[r] {
  fill: none;
  stroke: silver;
}
[r] + [r] {
  transform: rotate(-90deg);
  stroke-linecap: round;
  stroke: #8A9B0F;
  animation: arc 60s linear infinite;
  animation-name: arc, col;
}

@keyframes arc {
  0% {
    stroke-dashoffset: 0px;
  }
}
@keyframes col {
  0% {
    stroke: #8A9B0F;
  }
  25% {
    stroke: #F8CA00;
  }
  50% {
    stroke: #E97F02;
  }
  75% {
    stroke: #BD1550;
  }
  100% {
    stroke: #490A3D;
  }
}