@import url("./reset.css");

:root {
  --ff-sans: sans-serif;
  --ff-mono: monospace;

  @media (prefers-color-scheme: light) {
    --clr-text: hsl(234deg, 16%, 35%);
    --clr-background: hsl(220deg, 23%, 95%);
    --clr-link: hsl(220deg, 91%, 54%);
  }

  @media (prefers-color-scheme: dark) {
    --clr-text: hsl(226deg, 64%, 88%);
    --clr-background: hsl(240deg, 21%, 15%);
    --clr-link: hsl(217deg, 92%, 76%);
  }
}

body {
  font-family: var(--ff-sans);
  line-height: 1.6;
  margin: auto;
  padding: 2rem 1rem;
  max-width: 40rem;
  color: var(--clr-text);
  background-color: var(--clr-base);
}

pre,
code,
kbd,
samp {
  font-family: var(--ff-mono);
  font-size: 0.8rem;
}

a {
  color: var(--clr-link);
}

@media screen and (min-width: 768px) {
  html {
    font-size: 110%;
  }
}

@media screen and (min-width: 1024px) {
  html {
    font-size: 120%;
  }
}

@media screen and (min-width: 1200px) {
  html {
    font-size: 130%;
  }
}