@import url(https://fonts.bunny.net/css?family=geist:400);

:root {
  --bg-main: oklch(0.2511 0.006 258.36);
  --text-main: oklch(0.9187 0.003 264.54);
  --text-muted: oklch(0.6101 0.005 271.34);
  --bg-details: oklch(0.3502 0.005 236.66);
  --bg-mark: oklch(0.82 0.076 92);
  --link-color: #ffffff;
  --max-width: 550px;
  --padding-base: 1rem;
}

body {
  box-sizing: border-box;
  max-width: calc(var(--max-width) + (2 * var(--padding-base)));
  width: 100%;
  margin-inline: auto;
  padding: var(--padding-base);

  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: "Geist", "Noto Sans Emoji", sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

a {
  color: var(--link-color);
  text-underline-offset: 0.25em;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.8;
}

@media (min-width: 768px) {
  body {
    font-size: clamp(1.125rem, 1.5vw, 1.35rem);
  }
}

details {
  margin-block: 1rem;
}

details p {
  background-color: var(--bg-details);
  padding: 1rem;
  margin-block: 0.5rem 1.25rem;
  border-radius: 4px;
}

mark {
  background-color: var(--bg-mark);
  color: oklch(0.2 0 0);
  padding: 0.1em 0.4em;
  border-radius: 2px;
  transition: 1s ease;
}

img:hover {
  filter: grayscale(1);
}

mark:hover {
  background-color: oklch(0.89 0.146 91.5);
  filter: saturate(1.25);
}

img {
  max-width: 100%;
  height: auto;
  transition: 1s ease;
}

h1 sup {
  color: var(--text-muted);
}