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

body {
  @apply bg-neutral-950 flex justify-center items-start;
}

#noise-overlay {
  background: transparent url("/images/noise.png") repeat 0 0;
  background-repeat: repeat;
  opacity: 0.5;
}

#noise-overlay.animated {
  animation: none;
}

@media screen and (min-width: 640px) {
  #noise-overlay {
    opacity: 0.5;
  }
  #noise-overlay.animated {
    opacity: 1;
    animation: 250ms infinite noise;
  }
}

@keyframes noise {
  0%,
  100% {
    background-position: 0 0;
  }
  10% {
    background-position: -5% -10%;
  }
  20% {
    background-position: -15% 5%;
  }
  30% {
    background-position: 7% -25%;
  }
  40% {
    background-position: 20% 25%;
  }
  50% {
    background-position: -25% 10%;
  }
  60% {
    background-position: 15% 5%;
  }
  70% {
    background-position: 0 15%;
  }
  80% {
    background-position: 25% 35%;
  }
  90% {
    background-position: -10% 10%;
  }
}

h1 {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #0077e7, #01d8d1);
  filter: hue-rotate(0deg);
  animation: hueShift 6s infinite linear 1s;
}

@keyframes hueShift {
  0% {
    filter: hue-rotate(0deg);
  }

  100% {
    filter: hue-rotate(360deg);
  }
}
