#countdown {
  position: relative;
  height: 54px;
  width: 54px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#countdown-number {
  font: var(--font-text);
  color: var(--color-violet);
  display: inline-block;
  margin: auto;
}

svg {
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  transform: rotateY(-180deg) rotateZ(-90deg);
}

svg circle {
  stroke-dasharray: 157px;
  stroke-dashoffset: 0px;
  stroke-linecap: round;
  stroke-width: 2px;
  stroke: var(--color-violet);
  fill: none;
  animation: countdown 30.01s linear infinite forwards;
}

@keyframes countdown {
  from {
    stroke-dashoffset: 0px;
  }
  to {
    stroke-dashoffset: 157px;
  }
}