:root {
  color-scheme: light dark;

  --red: #df3f65;
  --orange: #e59235;
  --yellow: #ebc343;
  --green: #7dcc50;
  --blue: #4ea1e6;
  --violet: #b771d0;
  --brown: #967e5e;
  --border: #d7d7d5;
  --serif: Athelas, Garamond, "EB Garamond", serif;
  --sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
  font-family: var(--sans-serif);
  font-variant-numeric: oldstyle-nums;
  margin: auto;
  padding: 1rem;
  max-width: 80ch;
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}

main {
  margin: 1rem auto;
  max-width: 70ch;
}

a {
  color: var(--blue);
  text-decoration: none;
  &:hover {
    text-decoration-color: var(--blue);
    text-decoration: underline;
  }
}

article {
  line-height: 1.5;
  text-align: justify;
  text-justify: inter-word;
  & img {
    width: 100%;
  }
  > p:nth-of-type(2)::first-letter {
    font-size: 3.3rem;
    float: left;
    line-height: 3rem;
    padding-right: 0.2rem;
  }
  & p {
    font-family: var(--serif);
  }
  & ul {
    font-family: var(--serif);
  }
}

h1 {
  text-align: center;
}

em {
  color: var(--red);
}

table {
  border-collapse: collapse;
  width: 90%;
  margin: 5%;
  & th {
    text-align: left;
    border-bottom: 1px solid;
  }
}

.title {
  color: light-dark(black, white);
  font-family: var(--serif);
  font-weight: bold;
  font-variant: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  & svg {
    height: 1.5rem;
    margin: 0.5rem;
    vertical-align: middle;
    fill: light-dark(black, white);
  }
}

header {
  border-bottom: 1px solid var(--border);
  font-size: 1.25rem;
  font-family: var(--serif);
  font-weight: bold;
  font-variant: small-caps;
  & nav {
    & ul {
      display: flex;
      justify-content: space-evenly;
      list-style: none;
      padding: 0 0.5rem;

      & a {
        color: light-dark(black, white);
        text-decoration: none;
      }

      .active {
        text-decoration: underline;
        text-decoration-color: var(--blue);
      }
    }
  }
}

footer {
  font-family: var(--serif);
  border-top: 1px solid var(--border);
  & ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    font-size: 0.75rem;
    padding: 1rem;
    & a {
      text-decoration: none;
      &:hover {
        text-decoration: none;
      }
    }
    & svg {
      height: 0.75rem;
      width: 0.75rem;
      padding: 0.1rem;
      vertical-align: middle;
    }
  }
}

.list {
  color: light-dark(black, white);
  & h2 {
    margin-top: 1.25rem;
    margin-bottom: 0;
  }
  .lead {
    margin: 0;
    font-size: 1rem;
    text-align: left;
    text-decoration: none;
  }
}

.tags {
  & ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    font-size: 0.75rem;
  }
}

.lead {
  font-family: var(--sans-serif);
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

code {
  border-radius: 0.3em;
  padding: 0.1em 0.2em;
  font-size: 0.9em;
}

.highlight {
  background: light-dark(var(--border), gray);
  border-radius: 0.3rem;
  padding: 0.5em 0.5em;
  margin: 1rem 0;
  overflow: auto;
  & code {
    margin: 0;
    padding: 0;
  }
  & pre {
    margin: 0;
    padding: 0;
  }
}