*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) var(--color-bg);
}

::selection {
  background-color: var(--color-text);
  color: var(--color-bg);
}

:root {
  --color-accent: oklch(55% 35% 150);
  --color-bg: oklch(55% 25% 150);
  --color-bg-dark: oklch(35.569% 0.03798 154.336);
  --color-text: oklch(100% 3% 0);
  --color-link: oklch(80% 25% 450);
  --color-border: oklch(78% 0.18 123);
  --color-error: oklch(72.495% 0.14375 25.786);

  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  accent-color: var(--color-accent);

  font-size: clamp(0.8rem, 2.2vw, 1.2rem);
}


a,
a:visited {
  color: var(--color-link);
  text-decoration: none;
}