.circle {
  background-image: linear-gradient(to bottom left, #e48d8d, #ff0000);
  animation: rotated 3s ease infinite;
  animation: name duration timing-function delay iteration-count direction
    fill-mode;
}

#btn:hover :nth-child(2) {
  width: 16px;
}
#btn:hover :nth-child(3) {
  width: 10px;
}
.translate-x-\[60px\] {
  --tw-translate-x: 60px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media only screen and (min-width: 1024px) {
  .imagin {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
}

/* .anime {
        animation: rotate 4s ease-in-out infinite;
    } */

@keyframes rotate {
  30% {
    transform: translate(-10%, -10%);
    rotate: (360deg);
  }
  70% {
    transform: translate(-12%, 12%);
    rotate: (360deg);
  }
}

@keyframes rotated {
  100% {
    transform: rotate(360deg);
  }
}