@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes gentle-bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px); /* Slight upward movement */
  }
  100% {
    transform: translateY(0); /* Return to original position */
  }
}

a.gentle-clicked {
  animation: gentle-bounce 0.3s ease-out; /* Shorter, smoother animation */
}

body,
body p {
  font-size: 1.2rem;
}

#main {
  background: url(../images/background_hero.jpg) 0 0 no-repeat;
  background-size: cover
}

#main h1 {
  font-size: 3rem;
  line-height: 2;
}

#main .text-white img {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}