@import "tailwindcss";

@theme{
  --color-first: rgba(4, 193, 255, 1);
  --color-second: rgba(255, 39, 156, 1);
  --color-third: rgba(255, 175, 4, 1);
  --color-base: #0273ff;
}

/*start liquid glass*/
.liquid-glass{
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow: hidden;
  transition: opacity 0.26s ease-out;
  border-radius: 28px;
  filter: drop-shadow(-8px -10px 46px #0000005f);
  backdrop-filter: brightness(1.1)
  blur(0px)
  url(#displacementFilter);
}

.liquid-glass::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 28px;
  -webkit-box-shadow: inset 2px 2px 0 -2px rgba(255, 255, 255, 0.7),
  inset 0 0 3px 1px rgba(255, 255, 255, 0.7);
  box-shadow: inset 6px 6px 0 -8px rgba(255, 255, 255, 0.7),
  inset 0 0 5px 0 rgba(255, 255, 255, 0.7);
}
/*end liquid glass*/

/*spinner*/
.spinner-lite{
  animation: spin-lite 10s linear infinite;
}

@keyframes spin-lite {
  0% { transform: rotate(0deg); }
  5%  { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}