* {
  box-sizing: border-box;
}

:root {
  --font: sans-serif;
  --gap: 0.5rem;
  --deco-border-style: solid;
  accent-color: hsl(277 100% 50%);

  --hue: 277;
  --accent-color: hsl(var(--hue) 50% 5%);
  --background-color: white;
  --font-color: black;
  --link-color: hsl(var(--hue) 100% 25%);
  --link-color-visited: hsl(var(--hue) 100% 25%);
  --header-background: hsl(var(--hue) 100% 90%);

  @media (prefers-contrast: more) {
    --link-color: hsl(var(--hue) 100% 20%);
    --link-color-visited: hsl(var(--hue) 100% 5%);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent-color: hsl(var(--hue) 100% 97%);
    --background-color: black;
    --font-color: white;
    --link-color: hsl(var(--hue) 100% 65%);
    --link-color-visited: hsl(var(--hue) 100% 65%);
    --header-background: hsl(var(--hue) 10% 15%);
  }
}

html {
  font-family: var(--font);
  color: var(--font-color);
  background: var(--background-color);
}

body {
  margin: 0;
}

/* Skip to content (inspired by: https://css-tricks.com/how-to-create-a-skip-to-content-link/) */
#skip-to-content {
  top: 0;
  left: 0;
  z-index: 100;
  position: absolute;
  transform: translateY(-100%);
  transition: transform 0.3s;
  background-color: var(--background-color);
}

#skip-to-content:focus {
  transform: translateY(0%);
}

footer {
  border-top: 1px var(--deco-border-style) var(--accent-color);
  padding-top: var(--gap);

  p {
    width: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
  }
}

a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: text-underline-offset 0.2s ease-in-out;
  color: var(--link-color);
}

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

a:hover {
  text-underline-offset: 0.5em;
}

.badges {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  a {
    text-decoration: none;
    image-rendering: pixelated;
  }
}

ul:not(.badges) {
  li+li {
    margin-top: var(--gap);
  }
}

dl {
  margin: 0;

  dt {
    font-weight: bold;
  }

  dt:not(:first-child) {
    margin-top: calc(var(--gap) * 2);
  }

  dd {
    margin-left: 1ch;
  }

  dd:has(+ dd),
  dd+dd {
    display: list-item;
    list-style: disc inside;
    margin-top: var(--gap);
  }
}

.faded {
  font-weight: normal;
  color: color-mix(in srgb, var(--accent-color) 75%, transparent);

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

strong,
em,
dt,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--accent-color);
}

ins {
  text-decoration: none;
}

pre {
  overflow-x: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

body>header {
  top: 0;
  padding: var(--gap);
  position: sticky;

  >nav {
    padding: var(--gap);
    background: var(--header-background);
  }
}