@font-face{ 
   font-family: 'Cascadia Code';
   src: url('/fonts/CascadiaCode.woff2');
   font-weight: 100 900;
}

:root {
  height: 100%;

  font-size: 20px;

  /* Sidebar */
  --nav-border-width: 2.5rem;
  --nav-link-font-size: 1.1rem;
  --nav-link-group-size: 1.2rem;
  --nav-links-width: 8rem;

  /* Article widths */
  --article-main-width: 32rem;
  --article-gutter-width: 3.2rem;
  --article-aside-width: 12.8rem;
  --article-full-width: calc(
      var(--article-main-width) +
      var(--article-gutter-width) +
      var(--article-aside-width)
    );

  /* Main area font sizes */
  --article-title-font-size: 2rem;
  --section-title-font-size: 1.5rem;
  --drop-cap-size: 3.6rem;
  --first-line-font-size: 1.1rem;
  --superscript-font-size: 0.8rem;
  --code-font-size: 0.75rem;
  --footer-font-size: 0.8rem;

  /* Horizontal spacing */
  --article-padding: 2rem;
  --indent: 1.6rem;
  --half-indent: calc(var(--indent) / 2);
  --double-indent: calc(2 * var(--indent));

  /* Vertical spacing */
  --article-line-height: 1.6;
  --paragraph-space: 1.2rem;
  --half-space: calc(var(--paragraph-space) / 2);
  --narrow-space: calc(var(--paragraph-space) / 3);

  /* General colors */
  --header-color: #323237;
  --header-text-color: #eceae4;
  --text-color: #323237;
  --page-color: #eceae4;
  --aside-color: #e0ceb1;

  /* Link colors */
  --link-color: #599bff;
  --visited-link: #c27bff;
  --active-link: #ff6868;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #bbb7aa;
    --page-color: #24242e;
    --aside-color: #323237;
  }

  a:not(.this-page):link {
    color: var(--link-color);
  }

  a:not(.this-page):visited {
    color: var(--visited-link);
  }

  a:not(.this-page):active {
    color: var(--active-link);
  }
}

/* for extra-wide screens, increase the font size (which scales everything
   else up because all the sizes are relative) */

@media (width >= 1548px) {
  :root {
    font-size: 24px;
  }
}

@media (1548px > width >= 1419px) {
  :root {
    font-size: 22px;
  }
}

/* Layout styles that are independent of width */

/* body */
.page {
  background-color: var(--page-color);
  box-shadow: inset 0 0 6px 0 var(--aside-color);
  color: var(--text-color);
  display: flex;
  font-family: 'Alegreya', serif;
  margin: 0;
  min-height: 100%;
}

/* header */
.bar {
  background-color: var(--header-color);
  color: var(--header-text-color);
  flex: 0;
  display: flex;
  align-items: center;
  font-size: var(--nav-link-font-size);
  padding: var(--half-space) 1rem;
}

/* nav */
.links {
  box-sizing: border-box;
  display: flex;
  font-weight: bold;
  width: 100%;
}

/* a */
.logo-link {
  border-radius: 100%;
  display: block;
}

/* img */
.logo {
  border-radius: 100%;
  display: block;
}

/* ul */
.link-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* h2 */
.group {
  border-bottom: 1px solid var(--header-text-color);
  font-size: var(--nav-link-group-size);
}

.link a:not(.this-page):link {
  color: var(--link-color);
}

.link a:not(.this-page):visited {
  color: var(--visited-link);
}

.link a:not(.this-page):active {
  color: var(--active-link);
}

/* main */
.main {
  background-position: left 0 top 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

/* hr */
.break {
  margin: 0;
  border-bottom: 1px solid var(--text-color);
  border-left: none;
  border-right: none;
  border-top: none;
}

/* footer */
footer {
  clear: both;
}

/* p */
.copyright {
  text-align: center;
  font-size: var(--footer-font-size);
}

/* navbar changes with screen width */

@media (width >= 1290px) {
  /* above this point, the nav bar is on the left */
  .page {
    flex-direction: row;
  }

  .main {
    background-image: url(/images/border_vertical.svg);
    background-repeat: repeat-y;
    background-size: var(--nav-border-width) auto;
    padding-left: var(--nav-border-width);
  }

  .bar {
    flex-direction: column;
  }

  .links {
    flex-direction: column;
    min-width: var(--nav-links-width);
  }

  .logo-link {
    margin: var(--paragraph-space) 0 var(--half-space);
    width: 100%;
  }

  .logo {
    aspect-ratio: 1;
    height: auto;
    width: 100%;
  }

  .group {
    margin: var(--paragraph-space) 0 0;
  }

  .link {
    margin: var(--half-space) 0;
  }
}

@media (1290px > width) {
  /* below this point, the nav bar is on top */
  .page {
    flex-direction: column;
  }

  .main {
    background-image: url(/images/border_horizontal.svg);
    background-repeat: repeat-x;
    padding-top: var(--nav-border-width);
    background-size: auto var(--nav-border-width);
  }

  .logo {
    width: 100px;
    height: 100px;
  }

  .link-list {
    min-width: max-content;
  }

  .link {
    margin: 0 0 0 var(--half-indent);
  }
}

@media (1290px > width >= 646px) {
  /* links horizontal */
  .bar {
    flex-direction: row;
  }

  .links {
    flex-direction: column;
  }

  .group {
    margin: 0 0 var(--narrow-space) var(--half-indent);
  }

  .link {
    display: inline-block;
  }
}

@media (646px > width >= 412px) {
  /* link groups side by side */
  /* links stacked */
  .links {
    flex-direction: column;
    align-self: flex-start;
  }

  .group {
    margin: 0 0 0 var(--half-indent);
  }

  .link {
    display: block;
  }
}

@media (412px > width) {
  /* groups stacked */
  .bar {
    flex-direction: column;
  }

  .links {
    flex-direction: column;
  }

  .links + .links {
    margin-top: var(--half-space);
  }

  .group {
    margin: 0;
  }

  .link {
    display: block;
  }
}

/* article layout */

/* article */
.article {
  font-size: var(--article-font-size);
  line-height: var(--article-line-height);
  margin: 0 auto;
  padding: var(--article-padding);
}

/* aside */
.side {
  background-color: var(--aside-color);
  border-left: 1px solid var(--text-color);
  float: right;
  margin: 0;
  padding:
    0
    calc(var(--article-gutter-width) / 8)
    0
    calc(var(--article-gutter-width) / 4);
}

/* p, ul, figure, hr, etc. */
.inline {
  box-sizing: border-box;
  margin-bottom: var(--paragraph-space);
  width: var(--article-main-width);
}

@media (width >= 1040px) {
  /* two column */
  .article {
    width: var(--article-full-width);
  }

  .side {
    width: var(--article-aside-width);
  }
}

@media (1040px > width) {
  /* one column */
  .side {
    box-sizing: border-box;
    margin: 0 0 var(--paragraph-space) calc(var(--article-gutter-width) / 4);
  }
}

@media (1040px > width >= 720px) {
  /* asides take half of column */
  .article {
    width: var(--article-main-width);
  }

  .side {
    width: 50%;
  }
}

@media (720px > width) {
  /* no more margin */
  /* asides take most of column */
  .article {
    box-sizing: border-box;
    width: 100%;
  }

  .inline {
    max-width: 100%;
    clear: both;
  }

  .aside-container {
    display: flex;
    flex-flow: column-reverse;
  }

  .side {
    align-self: flex-end;
    width: 95%;
  }
}

@media (550px > width) {
  /* this stop is subjective */
  /* reduce padding and indentation */
  /* asides get wider */
  :root {
    --indent: 0.8rem;
    --article-padding: var(--narrow-space);
  }
}

/* article content - doesn't change with width */

.article-title {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: var(--article-title-font-size);
  font-weight: 300;
  line-height: 1;
  margin: 0 0 var(--paragraph-space);
  padding: var(--half-space) 0;
}

/* h2 */
.article-subtitle {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: var(--section-title-font-size);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  margin:
    calc(-1.5 * var(--paragraph-space))
    0
    var(--paragraph-space)
    0;
  padding: var(--half-space) 0;
}

.section-title {
  font-size: var(--section-title-font-size);
  font-weight: 500;
  line-height: 1;
  margin: var(--article-padding) 0 var(--narrow-space);
  padding: var(--narrow-space) 0;
}

.drop-cap::first-letter {
  float: left;
  font-size: var(--drop-cap-size);
  line-height: calc(0.4 * var(--article-line-height));
  margin-right: 0.1rem;
  margin-top: 0.4rem;
}

.first-line {
  font-family: 'Alegreya SC', serif;
  font-size: var(--first-line-font-size);
  font-weight: 500;
  line-height:0;
}

.para {
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  padding: 0;
}

.bullets {
  list-style-type: circle;
  margin-top: 0;
  padding-left: var(--double-indent);
}

.bullets > li + li {
  margin-top: var(--narrow-space);
}

.fig {
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  padding: 0;
}

.blockquote {
  margin: 0;
  padding: 0 var(--double-indent) var(--narrow-space);
  box-sizing: border-box;
}

.attribution {
  text-align: right;
}

.img {
  height: auto;
  max-width: 100%;
  margin: 0;
  padding: 0 0 var(--narrow-space);
  display: block;
}

.caption {
  text-align: center;
  font-style: italic;
}

.note {
  font-family: "Cascadia Code", monospace;
  font-weight: 350;
  font-size: var(--superscript-font-size);
  line-height: 0;
}

/* code formatting - doesn't change with width */

code, .code {
  font-family: "Cascadia Code", monospace;
  font-size: var(--code-font-size);
  font-weight: 300;
  background-color: var(--header-color);
  color: var(--header-text-color);
  border-radius: 0.44em;
}

.code.block {
  padding: 0.18em 0.36em 0.36em 0.27em;
  position: relative;
  counter-reset: line;
  display: grid;
  grid-template-columns: min-content 1fr;
}

.code.block::before {
  background-color: var(--page-color);
  color: var(--text-color);
  border-radius: 0.44em;
  padding: 0 0.27em 0 0.44em;
  position: absolute;
  right: 0.27em;
  top: 0.33em;
  content: attr(data-language);
}

.block .lineno:first-of-type::before {
  border-radius: 0.44em 0 0 0;
  margin-top: 0.1em;
}

.block .lineno:last-of-type::before {
  border-radius: 0 0 0 0.44em;
}

.block .lineno::before {
  counter-increment: line;
  content: counter(line);
  background-color: var(--page-color);
  color: var(--text-color);
  display: block;
  text-align: right;
  padding: 0 0.3em;
  margin: 0 0.7em 0 0.1em;
  height: 100%;
  font-weight: 350;
}

.line {
  display: block;
  text-indent: 0.75em hanging;
  white-space: pre-wrap;
}

.code.snippet {
  padding: 0.09em 0.27em;
  display: inline;
}

.code span {
  font-weight: 350;
}

.code .keyword {
  color: #FFAABB;
}

.code .module {
  color: #77AADD;
}

.code .type {
  color: #99DDFF;
}

.code .symbol {
  color: #77AADD;
}

.code .variant {
  color: #77AADD;
}

.code .string {
  color: #EE8866;
}

.code .number {
  color: #44BB99;
}

.code .comment {
  color: #BBCC33;
}

.code .name {
  color: #EEDD88;
}

.code .pseudokey {
  color: #FFAABB;
}