.container {
  padding: 0 1.5rem;
}
@media (min-width: 1024px) {
  .container {
    padding: 0 6rem;
  }
}

#svg {
  height: 100%;
}

#svg text {
  font-size: .1px;
  font-weight: bold;
  margin-left: .5px;
  stroke-width: .005px;
  fill: #eeeeee;
  stroke: #121212;
  white-space: pre;
}

#svg.is-spinning {
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: 2;
  animation-timing-function: linear;
}

#svg.is-stopping {
  animation-name: spin-stop;
  animation-duration: 3000ms;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

#svg {
  --rotationEnd: 0deg;
  display: inline-block;
}

.indicator {
  font-size: 3em;
  font-weight: bold;
  stroke-width: .005px;
  fill: #eeeeee;
  stroke: #121212;
}

@keyframes spin {
  from {transform:rotate(0deg);}
  to { transform:rotate(360deg); }
}


@keyframes spin-stop {
  from { transform:rotate(0deg); }
  to { transform:rotate(var(--rotationEnd)); }
}