:root {
  --light-bg-color: whitesmoke;
  --light-fg-color: black;
  --light-outline-color: black;
  --light-link-color: blue;
  --dark-bg-color: #0f191f;
  --dark-fg-color: #a9d5c4;
  --dark-outline-color: #a9d5c4;
  --dark-link-color: #5ce309;
  --sidebar-basis: 40ch;
  --main-block-basis: 80ch;
  --min-container-width: 128ch;
}
@font-face {
  font-family: Fira;
  src: url("/FiraCode-Regular.woff2") format("woff2");
}
body {
  color-scheme: light dark;
  font-family: Verdana, sans-serif;
  background-color: light-dark(var(--light-bg-color), var(--dark-bg-color));
  color: light-dark(var(--light-fg-color),var(--dark-fg-color));
  line-height: 1.8rem;
  margin: 0;
}
footer {
  text-align: center;
  min-width: var(--min-container-width);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}
a {
  text-decoration: none;
  color: light-dark(var(--light-link-color),var(--dark-link-color));
  &:visited {
    color: light-dark(var(--light-link-color),var(--dark-link-color));
  }
}
h2 {
  display: block;
  font-size: 1em;
  margin: 1.33em 0;
  font-weight: bold;
}
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}
.main-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: var(--min-container-width);
  padding-bottom: 1rem;
  padding-top: 1rem;
  border-bottom: 1px solid light-dark(var(--light-outline-color),var(--dark-outline-color));
  border-top: 1px solid light-dark(var(--light-outline-color),var(--dark-outline-color));
  margin-top: 1rem;
  #site-title {
    font-family: Fira, monospace;
    a {
      color: light-dark(var(--light-fg-color),var(--dark-fg-color));
      &:visited {
        color: light-dark(var(--light-fg-color),var(--dark-fg-color));
      }
    }
  }
  nav {
    padding-left: 2ch;
  }
}
.main-block  {
  flex-basis: var(--main-block-basis);
  padding-right: 2rem;
  padding-left: 2rem;
}
.section-content {
  display: flex;
  flex-direction: row;
  max-width: var(--min-container-width);
  min-height: 100vh;
  justify-content: center;
}
@media only screen and (max-width: 900px) {
  .section-content {
    flex-direction: column;
  }
  .sidebar {
    border-left: none;
    border-top: 1px solid light-dark(var(--light-outline-color),var(--dark-outline-color));
  }
}

.sidebar {
  flex-basis: var(--sidebar-basis);
  border-left: 1px solid light-dark(var(--light-outline-color),var(--dark-outline-color));
  padding-left: 1.5rem;
  padding-right: 1rem;
  details {
    summary {
      font-family: Fira, monospace;
      margin-top: 1rem;
      &:hover {
        cursor: pointer
      }
    }
    ul {
      padding-bottom: 1px;
      padding-left: 0;
      list-style: none;
    }
  }
}
.sidebar-licence {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.article-preamble {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}
@media only screen and (max-width: 1100px) {
  .article-preamble {
    flex-direction: column;
    span {
      display: none;
    }
  }
}
.article-title {
  font-family: Fira, monospace;
  margin-top: 1rem;
}