:root {
  --body-margin: 1rem;
  --main-width: 52rem;
  --box-curved-radius: .25rem;
  --filler-text-color: #6c757d;
  --main-header-color: #2f4f4f;
}

html {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: system-ui, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Helvetica, Arial, sans-serif;
  line-height: 1.75;
}

body {
  margin: 0;
  font-size: 1.25rem;
}

body > header {
  border-radius: var(--box-curved-radius);
  background-color: #e9ecef;
}

body > header nav {
  padding: .5rem var(--body-margin);
  display: flex;
}

body > header nav ol {
  flex-wrap: wrap;
  margin-block: 0;
  padding-inline-start: 0;
  list-style: none;
  display: flex;
}

@media only screen and (width <= 52em) {
  html > body > header nav ol {
    flex-direction: column;
  }
}

body > header nav ol li {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

body > header nav ol li:not(:first-child):before {
  content: "/";
  color: var(--filler-text-color);
  padding-left: 1em;
  padding-right: 1em;
}

main {
  margin-left: var(--body-margin);
  margin-right: var(--body-margin);
}

main article pre code {
  background-color: #002b36;
  padding: 1em;
  display: block;
  overflow: auto;
}

main article code {
  color: #483d8b;
  word-wrap: break-word;
  font-family: monospace, system-ui;
}

main article header, main > section > header {
  color: var(--main-header-color);
  border-bottom: .005rem solid #eee;
}

main > section > div > ol {
  margin-block: 0;
  padding-inline-start: 0;
  list-style: none;
}

main > section > div > ol > li {
  display: block;
}

main > section ol ol {
  margin-block: 0;
  list-style: square;
}

main > section ol ol li {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

main > section ol ol li::marker {
  color: var(--filler-text-color);
}

body > footer {
  padding-left: var(--body-margin);
  padding-right: var(--body-margin);
  margin-top: 1rem;
  margin-bottom: 1rem;
}

body > footer > div {
  border-top: .01rem solid #eee;
}

body > footer li {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

body > footer small {
  word-wrap: break-word;
  background-color: #f8f9fa;
  background-clip: border-box;
  border: 1px solid #00000020;
  border-radius: .25rem;
  flex-direction: column;
  padding: .5rem 1.25rem;
  display: flex;
}

@media only screen and (width >= 56em) {
  body > header {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  body > header nav {
    width: var(--main-width);
    text-align: start;
  }

  main {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  main > article, main > section {
    width: var(--main-width);
  }

  body > footer {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  body > footer > div {
    width: var(--main-width);
  }
}

.picture-container {
  width: 100%;
  overflow: hidden;
}

.picture-container > picture > img {
  width: 100%;
  height: auto;
}