:root {
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  line-height: 1.618;
}

body {
  width: 75%;
  max-width: 72ch;
  margin: 2rem auto 2rem auto;
}

nav {
  width: 100%;
  display: flex;
  justify-content: space-around;

  background-color: CanvasText;
  color: Canvas;
  font-weight: bold;

  padding-block: 1ch;
  margin-block-end: 2ch;

  > a {
    text-decoration: none;
  }
}

footer {
  width: 100%;
  color: GrayText;
  text-align: center;

  & > section {
    width: 30%;
    display: flex;
    margin-inline: auto;
    justify-content: center;
    align-items: center;

    & > * {
      padding-inline: 1ch;
      text-decoration: none;
    }
  }
}

a {
  color: inherit;
  &:hover, &:focus {
    color: #8e60a7;
  }
}

p, details {
  margin-block-start: 0ch;
  margin-block-end: 2ch;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  position: relative;

  & > a {
    text-decoration: none;
  }

  &:hover > .zola-anchor {
    opacity: 100;
  }
}

ul {
  list-style: square;
}

video, picture, img {
  width: 100%;
}

small {
  color: GrayText;
  font-size: 100%;

  & > a {
    text-decoration: none;
  }
}

.zola-anchor {
  opacity: 0;
  position: absolute;
  right: 101%;
  transition: opacity .1s linear;
}

.section-list {
  list-style: none;
  margin: 0;

  padding-inline-start: 0;
}

.section-title {
  text-decoration: none;
}

.summary {
  color: GrayText;
  font-size: 90%;

  & > p {
    margin-block-start: 0;
  }
}

#article-header {
  margin-block-end: 1ch;
}