:root {
  height: 100%;

  --page-bg-color: #f0f0f0;
  --header-footer-bg-color: #f0f0f0;
  --main-bg-color: #fafafa;
  --text-color: #444444;
  --link-color: #555555;

  --spacing: 6px;
  --page-width: 1080px;
  --page-margin: 72px;
}

@media (max-width: 1080px) {
  :root {
    --page-margin: calc(var(--spacing) * 2);
  }
}

* {
  box-sizing: border-box;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover, a:focus {
  color: var(--text-color);
  text-decoration: underline;
}

a.current {
  font-weight: bold;
}

@media (hover: none) {
  /* External links */
  a[href*="//"]::after {
    display: inline-block;
    position: absolute;
    width: 16px;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='16' height='16' style='fill: rgba(128, 128, 128, 1);' viewBox='0 0 24 24'%3E%3Cpath d='M 5 3 C 3.9069372 3 3 3.9069372 3 5 L 3 19 C 3 20.093063 3.9069372 21 5 21 L 19 21 C 20.093063 21 21 20.093063 21 19 L 21 12 L 19 12 L 19 19 L 5 19 L 5 5 L 12 5 L 12 3 L 5 3 z M 14 3 L 14 5 L 17.585938 5 L 8.2929688 14.292969 L 9.7070312 15.707031 L 19 6.4140625 L 19 10 L 21 10 L 21 3 L 14 3 z'%3E%3C/path%3E%3C/svg%3E") / "External Link";
  }
}

@media (hover: hover) {
  /* External links */
  a[href*="//"]::after {
    display: inline-block;
    position: absolute;
    width: 16px;
    content: "";
  }

  a[href*="//"]:hover::after,
  a[href*="//"]:focus::after,
  a[href*="//"]:active::after {
    display: inline-block;
    position: absolute;
    width: 16px;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='16' height='16' style='fill: rgba(128, 128, 128, 1);' viewBox='0 0 24 24'%3E%3Cpath d='M 5 3 C 3.9069372 3 3 3.9069372 3 5 L 3 19 C 3 20.093063 3.9069372 21 5 21 L 19 21 C 20.093063 21 21 20.093063 21 19 L 21 12 L 19 12 L 19 19 L 5 19 L 5 5 L 12 5 L 12 3 L 5 3 z M 14 3 L 14 5 L 17.585938 5 L 8.2929688 14.292969 L 9.7070312 15.707031 L 19 6.4140625 L 19 10 L 21 10 L 21 3 L 14 3 z'%3E%3C/path%3E%3C/svg%3E") / "External Link";
  }
}

p {
  line-height: 1.75em;
  margin: 1.75em 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing);

  min-height: 100%;

  margin: 0;

  background-color: var(--page-bg-color);
  color: var(--text-color);

  font-family: 'Fira Code', monospace;
}

@supports (font-variation-settings: normal) {
  body { font-family: 'Fira Code VF', monospace; }
}

header,
footer {
  width: 100%;
  padding: 0 var(--spacing);
  background-color: var(--header-footer-bg-color);
}

nav {
  padding: var(--spacing);
}

menu {
  display: flex;
  gap: var(--spacing);

  overflow-x: auto;

  margin: 0;
  padding: 0;
}

nav li {
  display: block;
  overflow: hidden;

  list-style: none;

  text-wrap: nowrap;
  text-overflow: clip;
}

header nav li:first-of-type {
  flex-grow: 1;
}

footer nav li:last-of-type {
  display: inline-block;
  flex: 1 0 auto;
  margin: var(--spacing);
  padding: var(--spacing);
  text-align: right;
  opacity: 25%;
}

nav button {
  width: 32px;
  height: 32px;
  margin: var(--spacing);
  padding: 0;
  border: 0;
  border-radius: 50%;

  background-color: rgba(0, 0, 0, 0);
}

nav button:hover {
  cursor: pointer;
}

:root:not([color-scheme]) nav button {
  opacity: 0.25;
}

:root:not([color-scheme]) nav button:hover,
:root:not([color-scheme]) nav button:focus {
  opacity: 0.5;
}

#color-scheme-button-reset {
  width: 16px;
  height: 16px;
  position: absolute;
  translate: -24px 0;
}

nav button svg {
  width: 75%;

  margin: 12.5%;

  border-radius: 50%;

  fill: var(--link-color);
}

:root:not([color-scheme]) nav button svg {
  background-color: rgba(0, 0, 0, 0);
  fill: var(--link-color);
}

nav button:hover svg {
  background-color: var(--main-bg-color);
  fill: var(--text-color);
}

#color-scheme-button-reset svg {
  width: 12px;
  height: 12px;

  fill: var(--main-bg-color);
  background-color: var(--link-color);
  border-radius: 6px;
}

#color-scheme-button-reset:hover svg {
  background-color: var(--text-color);
}

#color-scheme-icon-dark { display: none; }

nav a {
  display: inline-block;

  margin: var(--spacing);
  padding: var(--spacing);
}

main {
  flex-grow: 1;

  width: calc(100% - (var(--spacing) * 4));
  max-width: var(--page-width);
  margin: var(--spacing);
  padding: var(--page-margin);

  background-color: var(--main-bg-color);

  border-radius: var(--spacing);
}

main > h1 {
  margin: var(--spacing) 0 var(--page-margin);

  text-align: center;
  font-weight: normal;
}

footer nav {
  max-width: var(--page-width);
  margin: auto;
}