:root {
  color-scheme: light dark;

  --font-color: light-dark(#111, #eee);
  --background-color: light-dark(#fff, #333);
  --header-color: light-dark(#000, #000);
  --heading-font-color: light-dark(#fff, #fff);
  --heading-back-color: light-dark(#333, #111);
  --border-color: light-dark(#000, #fff);
  --player-color: light-dark(#333, #030303);

  --ui-back: light-dark(#888, #888);
  --ui-front: light-dark(#fff, #fff);

  --anchor-color: light-dark(RoyalBlue, LightSkyBlue);
  --anchor-visited-color: light-dark(Brown, HotPink);
  --strong-color: light-dark(DeepPink, DeepPink);
}

body {
  font-size: 1.1em;
}

header,
header button {
  background-color: var(--header-color);
}

main {
  min-height: 100vh;

  > ol > li {
    margin: 0;
    padding: 0;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background-color: var(--background-color);

    h2 {
      margin: 0;
      padding: 0.4em 0.6em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-start-start-radius: calc(var(--radius) - 1px);
      border-start-end-radius: calc(var(--radius) - 1px);
      font-weight: normal;
      font-size: 1em;
      color: var(--font-color);
      background-color: var(--heading-back-color);

      a,
      a:visited,
      a:hover {
        color: var(--heading-font-color);
      }
    }

    ul {
      padding: 0 2em;

      li {
        list-style-type: disc;
      }
    }

    p {
      margin: 1em;
    }
  }

  .info {
    margin-block-start: 1em;
    margin-block-end: 0.5em;
    margin-inline-start: 1em;
    margin-inline-end: 0;
    line-height: 1.4em;
    vertical-align: baseline;

    dd {
      margin-block-start: 0;
      margin-block-end: 0;
      margin-inline-start: 0.4rem;
      margin-inline-end: 2rem;
    }

    details {
      margin: 0;
    }
  }
}

footer {
  border-block-start: 1px solid var(--border-color);
  color: var(--heading-font-color);
  background-color: var(--heading-back-color);
  padding: calc(var(--grid) / 2);

  small,
  strong {
    font-size: 0.8em;
  }
}

h1 {
  a,
  a:visited,
  a:hover {
    display: block;
    color: var(--heading-font-color);
  }
}

h2 {
  a,
  a:visited,
  a:hover {
    display: block;
    color: var(--font-color);
  }
}

article {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background-color: var(--background-color);

  h1 {
    margin: 0;
    padding: 0.4em 0.6em;
    font-size: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-start-start-radius: calc(var(--radius) - 1px);
    border-start-end-radius: calc(var(--radius) - 1px);
    font-weight: normal;
    color: var(--font-color);
    background-color: var(--heading-back-color);
  }

  strong {
    font-style: normal;
    color: var(--strong-color);
  }

  code {
    background-color: var(--code-inline);
    color: var(--code-inline-font);
  }

  section {
    padding: 0 1em;
  }

  ul,
  ol {
    font-family: inherit;
    font-size: 1em;
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  blockquote {
    display: block;
    border: solid 1px var(--block-quote);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 0;

    p::before {
      content: "> " / "";
    }
  }

  img.download {
    margin: 0;
    border: none;
    background-color: unset;
  }
}

nav {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;

  > ol {
    margin: 0;
  }
}

.disabled {
  display: none;
}

/* mozaic-player */
mozaic-player {
  display: block;
  background-color: var(--player-color);
  position: sticky;
  bottom: 0;
}

@media screen and (max-device-width: 800px) {
  article {
    section {
      padding: calc(var(--grid) / 2);
    }

    ul,
    ol,
    dl {
      margin-inline-start: calc(var(--grid) * 1.4);
    }

    li {
      margin: 0;
    }
  }

  .info {
    div {
      width: 100%;
    }
  }

  header {
    position: unset;
  }

  main {
    width: 100%;
  }

  nav {
    font-size: 0.7em;
  }

  audio {
    width: 100%;
  }

  h2,
  h3,
  h4 {
    margin: 0;
  }
}