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

:root {
  --background: black;
  --foreground: white;
  --primary: #688c65;
  --ts-small: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
    2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000;
  --ts-medium: 4px 4px 0 #000, -4px -4px 0 #000, 4px -4px 0 #000,
    -4px 4px 0 #000, 4px 0 0 #000, -4px 0 0 #000, 0 4px 0 #000, 0 -4px 0 #000;
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Pixellari, Arial, Helvetica, sans-serif;
  text-shadow: var(--ts-small);
  width: 100vw;
  overflow-x: hidden;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}