:root {
  --bg-dark: oklch(0 0 0);
  --bg-base: oklch(0.16 0 0);
  --bg-step-1: oklch(0.27 0 0);
  --bg-step-2: oklch(0.5 0 0);

  --text-main: hsl(0, 0%, 95%);
  --text-sub: hsl(0, 0%, 75%);
  --text-inverse: oklch(0.16 0 0);

  --primary1: hsl(300, 85%, 59%);
  --primary1-dark: hsl(300, 89%, 39%);
  
  --primary2: hsl(180, 85%, 59%);
  --primary2-dark: hsl(180, 89%, 39%);
  
  --primary3: hsl(63, 85%, 59%);
  --primary3-dark: hsl(63, 89%, 39%);
  
}

*{
  box-sizing: border-box;
  font-family: 'Roboto Mono';
}

* p {
  font-weight: 200;
}

body {
  margin: 0px;
  background-color: var(--bg-base);
  color: var(--text-main);
}

a {
  color: var(--primary3);
}

header, footer, section {
  scroll-margin-top: 70px;
}