:root {
  color-scheme: dark;

  --fg: light-dark(#1a1a1a, #c0caf5);
  --bg: light-dark(#cce, #24283b);
  --accent: light-dark(#0050b3, #7aa2f7);
  --accent2: light-dark(#de640b, #ff9e64);
  --selection: light-dark(#7aa2f7, #2e3c64);

  --round: 1em;
  --width: 45rem;
  --button-size: 1.7em;

  @media (prefers-contrast: more) {
    --fg: light-dark(#000, #fff);
    --bg: light-dark(#ddf, #1a1b26);
    /* --accent: light-dark(#00f, #00f); */
  }

  #dark-icon {
    display: none;
  }
  &:has(#light:checked) {
    color-scheme: light;
    #light-icon {
      display: none;
    }
    #dark-icon {
      display: inline;
    }
  }
  &:has(#dark:checked) {
    color-scheme: dark;
    #light-icon {
      display: inline;
    }
    #dark-icon {
      display: none;
    }
  }
}

@font-face {
  font-family: "my-font";
  src: url("/TX-02-Regular.woff2");
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: my-font, sans-serif;
  font-size: 1.2em;
  line-height: 1.4em;
  max-width: var(--width);
  margin-left: auto;
  margin-right: auto;
  padding: 0 10px 0 10px;
}

a {
  color: var(--accent);
  @media (prefers-reduced-motion: no-preference) {
    &:hover {
      color: var(--bg);
      background: var(--accent);
      text-decoration-color: var(--accent);
      text-decoration-skip-ink: none;
    }
  }
}

nav {
  padding: 10px 0 10px 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;

  label {
    input {
      display: none;
    }
  }
  a {
    text-decoration: none;
    &:hover {
      color: var(--accent);
      background: var(--bg);
      svg {
        fill: var(--accent);
        color: var(--accent);
      }
    }
  }
  svg {
    height: var(--button-size);
    width: var(--button-size);
    fill: var(--fg);
    color: var(--fg);
  }
}

div#list-of-links {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  a {
    display: flex;
    justify-content: left;
    align-items: center;
    text-decoration: none;
    min-width: 40%;
    border: 2px solid var(--accent);
    border-radius: 10px;
    margin: 10px;
    padding: 10px;
    min-height: 50px;
    &:hover {
      svg {
        fill: var(--bg);
        color: var(--bg);
      }
    }
    svg {
      margin: 0px 20px;
      height: var(--button-size);
      width: var(--button-size);
      fill: var(--fg);
      color: var(--fg);
    }
  }
}

div#blog-head {
  text-align: center;
  div#blog-title {
    font-size: 2em;
  }
}

div.footnote-definition {
  font-size: 0.9em;
  color: var(--fg);
  padding: 0em 3em;
  border-radius: var(--round);
  sup.footnote-definition-label {
    color: var(--accent2);
  }
  p {
    margin: 0px;
  }
}

a.zola-anchor {
  text-decoration: none;
  &:hover {
    color: var(--accent);
    background: var(--bg);
  }
}

ul {
  list-style-type: "- ";
}

li {
  &::marker {
    color: var(--accent2);
  }
}

dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1rem;

  dd {
    margin: 0;
  }
}

h1 {
  font-size: 1.8em;
  &::before {
    content: "# ";
  }
}

h2 {
  font-size: 1.4em;
  &::before {
    content: "## ";
  }
}

h3 {
  font-size: 1.2em;
  &::before {
    content: "### ";
  }
}

h1,
h2,
h3 {
  &::before {
    color: var(--accent2);
  }
  a {
    color: var(--fg);
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  padding: 0;
  margin: 30px 0px;
  thead tr:last-child th {
    border-top: 3px solid var(--fg);
    border-bottom: 3px solid var(--fg);
  }
  tbody tr:last-child td {
    border-bottom: 3px solid var(--fg);
  }
  th,
  td {
    vertical-align: top;
    text-align: left;
  }
}

blockquote {
  border-left: 0.2em solid var(--accent);
  /* background: var(--quote-bg); */
  p {
    padding: 5px 5px 5px 15px;
  }
}

:not(pre) > code {
  font-family: my-font, monospace;
  background: var(--selection);
  padding: 0.02em 0.3em;
  margin: 0 -0.3em;
  border-radius: 0.3em;
}

pre.giallo {
  padding: 1em;
  border-radius: var(--round);
  @media (prefers-contrast: more) {
    border: solid #fff;
  }
  code {
    background: inherit;
  }
}

img {
  max-width: 80%;
  display: grid;
  margin-inline: auto;
}

*::selection {
  background: var(--selection);
}