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

@layer base {
  html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
  }

  @keyframes slide {
    100% {
      background-position: 50px 0, 125px 25px;
    }
  }

  main {
    @apply px-4 min-h-screen sm:px-0 space-y-16 w-full bg-gray-900;
    background-image: radial-gradient(
        hsla(0, 0%, 84.3%, 0.25) 1px,
        transparent 0
      ),
      radial-gradient(hsla(0, 0%, 84.3%, 0.1) 1px, transparent 0);
    background-size: 50px 50px;
    background-position: 0 0, 25px 25px;
    -webkit-animation: slide 2s linear infinite;
    animation: slide 4s linear infinite;
  }
}