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

body {
  @apply bg-slate-950 min-h-screen relative tracking-wide overflow-x-hidden;
  z-index: 1;
}

#background__noisy {
  @apply bg-blend-normal pointer-events-none opacity-80;
  background-size: 25ww auto;
  background-image: url('/background_noisy.webp');
  z-index: -1;
  @apply fixed w-screen h-screen top-0 left-0;
}

@keyframes infinite_rotate {
  0% {
    transform: translate(-50%,-50%) rotate(1turn)
  }
  to {
    transform: translate(-50%,-50%) rotate(0)
  }
}
.background-spin {
  @apply absolute top-0 right-0 bottom-0 left-0 p-[1.5px] -z-[1] pointer-events-none transition-all duration-200;
  -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  border-radius: inherit
}
.background-spin::before {
  content: "";
  @apply block left-1/2 top-1/2 absolute rounded-full;
  background: conic-gradient(from 180deg at 50% 50%,#1e293b 0deg, #a5b4fc 10deg, #4f46e5 25deg,#6366f1 112.5deg,#14b8a6 203.75deg, #bae6fd 213.75deg, #14b8a6 228.75deg,rgba(42,138,246,0) 360deg);
  width: calc(100% * 2);
  padding-bottom: calc(100% * 2);
  transform: translate(-50%,-50%);
  z-index: -1;
  animation: infinite_rotate 5s linear infinite;
}