.wobbleFadeIn {
    animation: wobble ease 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes wobble {
    0% {
        transform: translateX(0%);
        opacity: 0;
    }
    15% {
        transform: translateX(-25%) rotate(-5deg);
    }
    30% {
        transform: translateX(20%) rotate(3deg);
    }
    45% {
        transform: translateX(-15%) rotate(-3deg);
    }
    60% {
        transform: translateX(10%) rotate(2deg);
    }
    75% {
        transform: translateX(-5%) rotate(-1deg);
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

.fade-in-down {
    opacity: 0;
    animation: fade-in-down 0.5s ease 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  @keyframes fade-in-down {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .fade-in-up {
    opacity: 0;
    animation: fade-in-up 0.5s ease 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  @keyframes fade-in-up {
    0% {
      opacity: 0;
      transform: translateY(0);
    }
    100% {
      opacity: 1;
      transform: translateY(-20px);
    }
  }