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

/* div, section, span, p, h1, button { */
/*     outline: 1px solid red; */
/* } */

@keyframes slowly-appear {
  0% {
      opacity: 0;
  }
  30% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

.slowly-appear {
  animation: slowly-appear 3s;
}

@keyframes pulsing-animation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.pulsing-animation {
  animation: pulsing-animation 1s;
  animation-iteration-count: 3;
  transform-origin: center;
}

@keyframes quickly-appear {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 0.05;
  }
}

.quickly-appear {
  animation: quickly-appear 2s;
  transform-origin: center;
}