*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  font-size: 1rem;
  line-height: 1.4;

	--light-shade: #FFF9F4;
	--light-accent: #B15A17;
	--brand-color: #FE821F;
	--dark-accent: #733D15;
	--dark-shade: #343C47;
	--commented: #3B3B3B;
	--code-background: #ECEEF1;
	--code-foreground: #424C5A;
	--link-foreground: #0000FC;
	--border-radius-base: 8px;
	--main-font: Inconsolata, sans-serif;
	--main-font-ascentHeight: 0.859;
	--main-font-descentHeight: 0.190;
	--main-font-capitalHeight: 0.675;
	--main-font-lineHeight: calc(16px * 1.5);
	--main-font-gap: var(--main-font-lineHeight);
	--main-font-xHeight: 400;
	--type-headlines: var(--main-font);
	--type-body: var(--main-font);
	/* --type-body: Georgia, "Times New Roman", Times, serif; */
	--type-code: Menlo, Monaco, Consolas, "Courier New", monospace;
}

body {
  font-family: monospace;
  padding: 1rlh;

  background-image: linear-gradient(rgba(50, 50, 50, 0.1) 1px, transparent 1px);
  background-size: 100% 1rlh;
}

body > header,
main,
body > aside,
body > footer {
  padding: 1rlh 0;
}

h1, h2, h3, h4, h5 {
  /* line-height: 1rlh; */
  margin-block-end: 1rlh;

  /* background-color: rgb(from var(--brand-color) r g b / 10%); */
}

/**
 * Hyperlinks
 */
 a[target="_blank"]::after {
  content: "";
  display: inline-block;
  vertical-align: text-top;
  margin-left: .3em;
  inline-size: .8em;
  block-size: .8em;
  background-color: currentColor;
  /* @source https://www.svgrepo.com/svg/447997/external-link */
  mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPgo8c3ZnIGZpbGw9IiMwMDAwMDAiIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTYwIDcwNGMtMzUuMzQ2IDAtNjQgMjguNjU0LTY0IDY0djY0YzAgMzUuMzQ2LTI4LjY1NCA2NC02NCA2NEgxOTJjLTM1LjM0NiAwLTY0LTI4LjY1NC02NC02NFYxOTJjMC0zNS4zNDYgMjguNjU0LTY0IDY0LTY0aDY0YzM1LjM0NiAwIDY0LTI4LjY1NCA2NC02NFMyOTEuMzQ2IDAgMjU2IDBoLTY0Qzg1Ljk2MSAwIDAgODUuOTYxIDAgMTkydjY0MGMwIDEwNi4wMzkgODUuOTYxIDE5MiAxOTIgMTkyaDY0MGMxMDYuMDM5IDAgMTkyLTg1Ljk2MSAxOTItMTkydi02NGMwLTM1LjM0Ni0yOC42NTQtNjQtNjQtNjR6Ii8+PHBhdGggZD0iTTEwMjMuODc2IDUxLjUyYzAtMS45MiAwLTMuODQtMS42LTUuNDRhNjMuOTU3IDYzLjk1NyAwIDAwLTEuOTItNi40IDYzLjk3MyA2My45NzMgMCAwMC0zLjItNi40czAtMy4yLTIuNTYtNC44YTYzLjk4OSA2My45ODkgMCAwMC0xNy42LTE3LjZMOTkxLjg3NiA4bC02LjA4LTMuMi02LjcyLTEuOTJoLTUuNDRBNjQuMDI4IDY0LjAyOCAwIDAwOTU5Ljg3NiAwaC0zODRjLTM1LjM0NiAwLTY0IDI4LjY1NC02NCA2NHMyOC42NTQgNjQgNjQgNjRoMjI5LjQ0bC0zNzAuNTYgMzcwLjg4Yy0yNS4wMDcgMjUuMDA3LTI1LjAwNyA2NS41NTMgMCA5MC41NnM2NS41NTMgMjUuMDA3IDkwLjU2IDBsMzcwLjU2LTM3MC44OFY0NDhjMCAzNS4zNDYgMjguNjU0IDY0IDY0IDY0czY0LTI4LjY1NCA2NC02NFY2NGMuNDA3LTQuMTUuNDA3LTguMzMgMC0xMi40OHoiLz48L3N2Zz4=");
  mask-repeat: no-repeat;
  mask-size: contain;
}

img {
  max-width: 100%;
}

.show-if-no--webgl, .hide-if-no--webgl {
  display: none;
}

.hide-if-no--webgl ~ .show-if-no--webgl {
  display: block;
}

ul {
  margin: 0 0 1lh;
}

p, section {
  margin-block: 1lh;
}

ul, ol, p {
  /* background-color: rgb(from var(--light-accent) r g b / 5%); */
}

abbr[title] {
  cursor: help;
  text-decoration: underline var(--dark-accent) dotted 3px;
  text-decoration-inset: -.25em;
  text-underline-offset: 2px;
}

ul.inline, ol.inline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1rlh;
  list-style: none;
  margin-block-end: 1rlh;
}

section, header, article, nav, aside, figure {
  margin-trim: block;
}

@supports not (margin-trim: block) {
  section, header, article, nav, aside, figure {
    > :first-child {
        margin-block-start: 0;
    }

    > :last-child {
        margin-block-end: 0;
    }
  }
}

/**
 *
 */


aside.warning {
  border: 3px dashed var(--brand-color);
  background-color: rgb(from var(--brand-color) r g b / 15%);
  padding: calc(1lh - 3px);
}

figure.map {
  background-color: rgb(from var(--brand-color) r g b / 15%);
  border-radius: 1lh;
  padding: 1rlh;

  > .maplibregl-map {
    display: block;
    height: min(40rlh, 80svh);
    margin-block: 2rlh 0 1rlh;
    width: 100%;
  }

  > figcaption {
    margin-block-start: 1rlh;

    p {
      font-weight: bold;
      margin-block: 0;
    }
  }
}

/**
 * Heading anchors
 */

/**
 * PrismJS override
 */
pre[class*="language-"] {
  margin: .5rlh 0;
  padding: 1rlh;
}