:root {
  --sbg: oklch(31.14% 0.021 285.75);
  --bg: oklch(0 0 0);
  --text: oklch(90% 0.008 286.75);
  --stext: oklch(8% 0 0);
  --soft: oklch(75.94% 0 0);
  --ssoft: oklch(60% 0 0);

  --baby-blue: #a2cffe;
  --baby-purple: #ca9bf7;
  --divider: oklch(75.94% 0 0 / 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(0 0 0);
    --text: oklch(90% 0.008 286.75);
    --soft: oklch(75.94% 0 0);
  }
}

body {
  background-color: var(--bg);
  color: var(--text);

  margin: 1rem;
  line-height: 1.5;
  max-width: 40rem;
}

@media (width > 40em) {
  body {
    margin: 4em;
  }
}

h3 {
  font-style: italic;
  color: var(--soft);
  opacity: 0.9;
  margin-block-start: 4em;
}

h3:not(:first-of-type) {
  padding-block-start: 0.4rem
}

li {
  padding-inline: 0.5em;
  margin-block: 0.5em;
  font-family: system-ui, sans-serif;
}

a {
  text-underline-offset: 0.4em;
  text-decoration-thickness: 0.1em;
}

a:hover {
  text-decoration-thickness: 0.2em;
}

a {
   color: var(--text);
   text-decoration-color: var(--baby-blue);
}

a:visited {
   color: var(--text);
   text-decoration-color: var(--baby-purple);
}

@media (prefers-color-scheme: dark) {
  li {
    color: var(--soft);
  }

  a {
    color: var(--text);
    text-decoration-color: var(--baby-blue);
  }

  a:visited {
    color: var(--text);
    text-decoration-color: var(--baby-purple);
  }
}

@media (width < 40em) {
  ul {
    padding-inline-start: 1em;
  }
}

footer {
  margin-block: 8rem;
  border-block-start: 1px dotted var(--divider);
  padding-block-start: 1.5rem;
}

@media (width < 40em) {
  footer {
    padding-block-end: 0.5rem;
  }
}

header h2 {
  margin-block-end: 0.2em;
  span {
    background-color: #ffede5;
    color: black;
  }
}

header p {
  margin-block-start: 0;
  margin-inline: 0.07rem;
  opacity: 0.7;
  font-style: italic;
  font-family: serif;
}