@import "tailwindcss";

@theme {
  /* ... */


  /* || animated background */
}
.background--custom {
  background-image: radial-gradient(
      circle 5px at top left,
      rgba(200, 200, 200, 0.05) 0%,
      rgba(200, 200, 200, 0.05) 50%,
      rgba(150, 150, 150, 0.05) 50%,
      rgba(150, 150, 150, 0.05) 30%,
      transparent 30%,
      transparent 50%
    ),
    linear-gradient(0deg, rgb(30, 30, 30), rgb(30, 30, 30)),
    linear-gradient(0deg, #4a2d99, #081f30, #42063f);

  background-size:
    30px 30px,
    auto,
    600% 600%;
  background-position:
    0 0,
    center,
    center;
  animation: gradient 15s alternate infinite;

  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}

@keyframes gradient {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}


/* || image shake effects */

.img-shake {
  animation: none;
  width: 200px;
  height: auto;
}

.img-shake:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
  transition: .5s ease-in;
}

@keyframes shake {
  0% {
      transform: translate(1px, 1px) rotate(0deg);
  }

  10% {
      transform: translate(-1px, -2px) rotate(-1deg);
  }

  20% {
      transform: translate(-3px, 0px) rotate(1deg);
  }

  30% {
      transform: translate(3px, 2px) rotate(0deg);
  }

  40% {
      transform: translate(1px, -1px) rotate(1deg);
  }

  50% {
      transform: translate(-1px, 2px) rotate(-1deg);
  }

  60% {
      transform: translate(-3px, 1px) rotate(0deg);
  }

  70% {
      transform: translate(3px, 1px) rotate(-1deg);
  }

  80% {
      transform: translate(-1px, -1px) rotate(1deg);
  }

  90% {
      transform: translate(1px, 2px) rotate(0deg);
  }

  100% {
      transform: translate(1px, -2px) rotate(-1deg);
  }
}
.bg-cream {
  background-color: #e8d4ae; /* Light cream color */
}