@charset "UTF-8";

.float {
  animation: floatY 2s ease-in-out infinite;
}

@keyframes floatY {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-12px) rotate(1deg);
  }
  50% {
    transform: translateY(-20px) rotate(0deg);
  }

  100% {
    transform: translateY(0) rotate(0deg);
  }
}
.float2 {
  animation: floatY2 4s ease-in-out infinite;
}

@keyframes floatY2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
.floatX1 {
  animation: floatX1 5s ease-in-out infinite;
}

@keyframes floatX1 {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}
.top_luffy {
  animation: top_luffy 3s ease-in-out infinite;
}

@keyframes top_luffy {
  0% {
    transform: rotate(0);
    transform: translateY(0);
  }
  50% {
    transform: rotate(10deg);
    transform: translateY(10);
  }
  100% {
    transform: rotate(0);
    transform: translateY(0);
  }
}