.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  color: inherit;
  vertical-align: -0.125em;
}
.spinner svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: spinner-turn 7.68s linear infinite;
}
.spinner path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linejoin: round;
  transform-origin: 12px 12px;
  animation: spinner-wedge 0.96s ease-out infinite;
}
.spinner path:nth-child(8) {
  animation-delay: -0.12s;
}
.spinner path:nth-child(7) {
  animation-delay: -0.24s;
}
.spinner path:nth-child(6) {
  animation-delay: -0.36s;
}
.spinner path:nth-child(5) {
  animation-delay: -0.48s;
}
.spinner path:nth-child(4) {
  animation-delay: -0.6s;
}
.spinner path:nth-child(3) {
  animation-delay: -0.72s;
}
.spinner path:nth-child(2) {
  animation-delay: -0.84s;
}
.spinner path:nth-child(1) {
  animation-delay: -0.96s;
}
@keyframes spinner-wedge {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0.2;
    transform: scale(0.78);
  }
}
@keyframes spinner-turn {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .spinner svg {
    animation: none;
  }
  .spinner path {
    animation-duration: 1.92s;
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  background: #3f4f35;
  color: #1A2332;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}