@keyframes pulse {
  from {
    opacity: 0.1;
  }
  to {
    opacity: 0.6;
  }
}

.loading-spinner {
  margin-top: 12rem;
  text-align: center;
  font-size: 1.5rem;
  color: $primary-color;

  @include media-max(small) {
    margin-top: 6rem;
  }

  svg {
    width: 200px;
    height: 200px;
    margin-bottom: 2rem;

    #path-comet {
      fill: $primary-color;
      opacity: 0.1;

      animation-name: pulse;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-duration: 1s;
    }
  }
}