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

:root {
  --background: 255, 255, 255;
  --background-blend: rgba(234, 144, 206, 0.5);
  --foreground: 0, 0, 0;
  --accent: 255, 192, 203;
  --accent-foreground: 33, 33, 33;
}

.dark {
  --background: 18, 18, 18;
  --background-blend: rgba(127, 1, 131, 0.483);
  --foreground: 255, 255, 255;
  --accent: 255, 182, 193;
  --accent-foreground: 240, 240, 240;
}

body {
  color: rgb(var(--foreground));
  background-image: url("https://static.simponic.xyz/static/penguins.png");
  background-repeat: repeat;
  background-size: 900px;
  background-color: var(--background-blend);
  background-blend-mode: multiply;
  backdrop-filter: blur(3px);
}

.glass {
  background: rgba(var(--background), 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--foreground), 0.1);
}