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

html{
  scroll-behavior:smooth ;
}
.animate-spin-slower {
    animation: spin 6s linear infinite;
  }
  @keyframes spin {
    to {
      transform: rotate(1turn);
    }
  }
  .animate-spin-slower-r {
    animation: spin-reverse 4s linear infinite;
  }
  @keyframes spin-reverse {
    to {
      transform: rotate(-1turn);
    }
  }
  .gradient2{
    
    background: #1d1d1f
    radial-gradient(circle, #353538 10%, transparent 1%);
    background-size: 3em 3em;
    opacity: 200
  }

  .gradient{
    
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgb(29, 29, 144) 0%, rgb(23, 23, 109) 90% );

  }

.curve{
  background-image: url(../public/wave-white.png)
}

.animado{
  opacity: 1;
  transition: all 0.5s;
}

.mostrarArriba{
  animation: mostrarArriba 1s ;
}

@keyframes mostrarArriba{
  0%{
    transform: translateY(60px);
  }
  100%{
    transform: translateY(0);
  }
}