* {
  transition: background-color .2s ease-in-out;
}

*::selection {
  background-color: var(--colour);
}

:root {
  color-scheme: light dark;
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins';
  margin: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: var(--surface);
  background: var(--background);
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  body {
    --text: hsl(0, 0%, 95%);
    --background: linear-gradient(in oklab 180deg, hsl(0, 0%, 10%), hsl(0, 0, 7%));
    --surface: hsl(0, 0%, 18%);
    --colour: hsl(0, 0%, 50%);
  }
}

@media (prefers-color-scheme: light) {
  body {
    --text: hsl(0, 0%, 5%);
    --background: linear-gradient(in oklab 180deg, hsl(0, 0%, 90%), hsl(0, 0%, 90%));
    --surface: hsl(0, 0%, 80%);
    --colour: hsl(0, 0%, 50%);
  }
}

.dark {
  --text: hsl(var(--hue), 20%, 95%);
  --background: linear-gradient(in oklab 180deg, hsl(var(--hue), 30%, 10%), hsl(var(--hue), 15%, 7%));
  --surface: hsl(var(--hue), 15%, 18%);
  --colour: hsl(var(--hue), 50%, 50%);
}

.light {
  --text: hsl(var(--hue), 50%, 10%);
  --background: linear-gradient(in oklab 180deg, hsl(var(--hue), 50%, 90%), hsl(var(--hue), 5%, 90%));
  --surface: hsl(var(--hue), 25%, 80%);
  --colour: hsl(var(--hue), 50%, 50%);
}