.spinner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 2rem;
}

.spinner_hat {
  position: absolute;
  animation: animation_hat 2s ease-in infinite;
  animation-direction: alternate;
}

@keyframes animation_hat {
  0% {
    transform: translateY(-0.1rem);
  }
  50% {
    transform: translateY(0.1rem);
  }
  100% {
    transform: translateY(0rem);
  }
}

.spinner_must {
  animation: must_anim 1s ease-in infinite;

  transform-origin: 50% 95%;
}

@keyframes must_anim {
  0% {
    transform: rotate(0deg);
  }
  45% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-30deg);
  }

  60% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner_up {
  animation: spinner_up 1s;
}
.spinner_down {
  animation: spinner_down 1s;
}
@keyframes spinner_up {
  to {
    transform: translateY(-2rem);
    opacity: 0;
  }
}

@keyframes spinner_down {
  to {
    transform: translateY(2rem);
    opacity: 0;
  }
}