:root {
  --background-body: var(--background-body);
  --background-tag: var(--background-alt);
  --tag: #c96107;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-body: #313638;
    --background-tag: var(--background-alt);
    --tag: #ffbe85;
  }
}

@font-face {
  font-family: "Fantasque Sans Mono";
  src:
    url("../fonts/FantasqueSansMono-Regular.woff2") format("woff2"),
    url("../fonts/FantasqueSansMono-Regular.woff") format("woff"),
    /* Firefox >= 3.6, any other modern browser */
      url("../fonts/FantasqueSansMono-Regular.ttf") format("truetype"); /* Safari, Android, iOS */
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Fantasque Sans Mono";
  src:
    url("../fonts/FantasqueSansMono-Bold.woff2") format("woff2"),
    url("../fonts/FantasqueSansMono-Bold.woff") format("woff"),
    /* Firefox >= 3.6, any other modern browser */
      url("../fonts/FantasqueSansMono-Bold.ttf") format("truetype");
  /* Safari, Android, iOS */
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Fantasque Sans Mono";
  src:
    url("../fonts/FantasqueSansMono-Italic.woff2") format("woff2"),
    url("../fonts/FantasqueSansMono-Italic.woff") format("woff"),
    /* Firefox >= 3.6, any other modern browser */
      url("../fonts/FantasqueSansMono-Italic.ttf") format("truetype");
  /* Safari, Android, iOS */
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Fantasque Sans Mono";
  src:
    url("../fonts/FantasqueSansMono-BoldItalic.woff2") format("woff2"),
    url("../fonts/FantasqueSansMono-BoldItalic.woff") format("woff"),
    /* Firefox >= 3.6, any other modern browser */
      url("../fonts/FantasqueSansMono-BoldItalic.ttf") format("truetype");
  /* Safari, Android, iOS */
  font-weight: 700;
  font-style: italic;
}

html {
  font-size: 87.5%;
}

body {
  /* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; */
  font-family: "Fantasque Sans Mono", sans-serif;
  line-height: 1.4;
}

p,
ol,
ul,
table,
pre,
blockquote {
  line-height: 1.6;
}

pre.mermaid {
  display: block;
  margin: 0 auto; /* Centers the diagram horizontally */
  text-align: center;
}

ul.tags {
  display: inline-flex;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

li.tag {
  display: inline-block;
  vertical-align: baseline;
  font-size: 0.85rem;
  background: var(--background-tag);
  padding: 0.15em 0.45em;
  border-radius: 4px;
  line-height: 1.2;
}

li.tag > a {
  color: var(--tag);
}

li.tag > a::before {
  content: "#";
}

@media (prefers-color-scheme: dark) {
  li.tag {
    background: var(--background-tag);
  }

  li.tag > a {
    color: var(--tag);
  }
}