/* latin-ext */
@font-face {
  font-family: 'MK Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url('/static/fonts/work-sans-variable-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'MK Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url('/static/fonts/work-sans-variable-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'MK Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: optional;
  src: url('/static/fonts/fira-code-variable-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'MK Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: optional;
  src: url('/static/fonts/fira-code-variable-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'MK Serif';
  font-style: normal;
  font-weight: 200 900;
  font-display: optional;
  src: url('/static/fonts/crimson-pro-variable-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'MK Serif';
  font-style: normal;
  font-weight: 200 900;
  font-display: optional;
  src: url('/static/fonts/crimson-pro-variable-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
  box-sizing: border-box;
}

:root,
.light {
  --bg-layer-1: #ffffff;
  --bg-layer-2: #f5f5f5;
  --bg-layer-3: #e4e4e4;
  --table-darker: var(--bg-layer-3);
  --table-lighter: var(--bg-layer-2);

  --text: #212121;
  --text-muted: #494949;
  --text-faint: #727272;

  --primary: #0d4524;
  --primary-alt: #328d58;
  --secondary: #ed5e34;
  --secondary-alt: #ef7754;
  --tertiary: #6796eb;
  --contrast: var(--black);

  --tag: #c5e1d1;

  --prism-primitive: #40a5a5;
  --prism-keyword: #316b6b;
  --prism-string: #379569;
  --prism-function: #e6571c;
  --prism-operator: #379569;
  --prism-inserted: #2b843f;
  --prism-deleted: #bb3946;
  --prism-class: #40a5a5;
}

.dark {
  --bg-layer-1: #25272c;
  --bg-layer-2: #33353a;
  --bg-layer-3: #414349;
  --table-darker: var(--bg-layer-2);
  --table-lighter: var(--bg-layer-3);

  --text: #e1e1e1;
  --text-muted: #d9d9d9;
  --text-faint: #9f9f9f;

  --primary: #35935c;
  --primary-alt: #55a476;
  --secondary: #f08666;
  --secondary-alt: #ee6c46;
  --tertiary: #7399e0;
  --contrast: var(--white);

  --tag: #2c3731;

  --prism-primitive: #afd1d1;
  --prism-keyword: #86baba;
  --prism-string: #85ffc7;
  --prism-function: #ff8552;
  --prism-operator: #85ffc7;
  --prism-inserted: #58ba6f;
  --prism-deleted: #e15361;
  --prism-class: #40a5a5;
}

@media (prefers-color-scheme: dark) {
  :root,
  .dark {
    --bg-layer-1: #25272c;
    --bg-layer-2: #33353a;
    --bg-layer-3: #414349;
    --table-darker: var(--bg-layer-2);
    --table-lighter: var(--bg-layer-3);

    --text: #e1e1e1;
    --text-muted: #d9d9d9;
    --text-faint: #9f9f9f;

    --primary: #35935c;
    --primary-alt: #55a476;
    --secondary: #f08666;
    --secondary-alt: #ee6c46;
    --tertiary: #7399e0;
    --contrast: var(--white);

    --tag: #2c3731;

    --prism-primitive: #afd1d1;
    --prism-keyword: #86baba;
    --prism-string: #85ffc7;
    --prism-function: #ff8552;
    --prism-operator: #85ffc7;
    --prism-inserted: #58ba6f;
    --prism-deleted: #e15361;
    --prism-class: #40a5a5;
  }
}

:root,
.theme {
  --system-sans:
    system-ui, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
    helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
    sans-serif;
  --system-serif:
    Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif,
    Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji,
    Segoe UI Symbol;
  --system-mono:
    Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;

  /* Use their local fonts if they have them installed on their machine */
  --font-serif: 'Crimson Pro', 'MK Serif', var(--system-serif);
  --font-mono: 'Fira Code', 'MK Mono', var(--system-mono);
  --font-sans: 'Work Sans', 'MK Sans', var(--system-sans);

  --font-weight-light: 200;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  --border: 1px solid var(--text);
  --border-radius: 3px;
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

  --white: #ffffff;
  --black: #25272c;
  --light-grey: #aaaaaa;
  --dark-grey: #666666;
  --danger: #df4554;
  --warning: #d6a206;
  --success: #39ae54;
  --text-selection: #ef775450;

  box-sizing: border-box;
  background: var(--bg-layer-1);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: calc(0.95rem + 0.15vw);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
}

::-moz-selection {
  background: var(--text-selection);
}

::selection {
  background: var(--text-selection);
}

/* ================================ HELPERS ================================= */

/* Background colors */
.bg-layer-1 {
  background: var(--bg-layer-1);
}
.bg-layer-2 {
  background: var(--bg-layer-2);
}
.bg-layer-3 {
  background: var(--bg-layer-3);
}
.bg-text {
  background-color: var(--text);
}
.bg-text-muted {
  background-color: var(--text-muted);
}
.bg-text-faint {
  background-color: var(--text-faint);
}
.bg-text-selection {
  background-color: var(--text-selection);
}
.bg-primary {
  background-color: var(--primary);
}
.bg-primary-alt {
  background-color: var(--primary-alt);
}
.bg-secondary {
  background-color: var(--secondary);
}
.bg-secondary-alt {
  background-color: var(--secondary-alt);
}
.bg-tertiary {
  background-color: var(--tertiary);
}
.bg-white {
  background-color: var(--white);
}
.bg-black {
  background-color: var(--black);
}

/* Foreground colors */
.fg-layer-1 {
  color: var(--bg-layer-1);
}
.fg-layer-2 {
  color: var(--bg-layer-2);
}
.fg-layer-3 {
  color: var(--bg-layer-3);
}
.text {
  color: var(--text);
}
.text-muted {
  color: var(--text-muted);
}
.text-faint {
  color: var(--text-faint);
}
.text-selection {
  color: var(--text-selection);
}
.primary {
  color: var(--primary);
}
.primary-alt {
  color: var(--primary-alt);
}
.secondary {
  color: var(--secondary);
}
.secondary-alt {
  color: var(--secondary-alt);
}
.tertiary {
  color: var(--tertiary);
}
.white {
  color: var(--white);
}
.black {
  color: var(--black);
}

/* Fonts */
.italic {
  font-style: italic;
}
.blog-post p {
  font-size: 1.25em;
  font-family: var(--font-serif);
}
.serif {
  font-size: 1.25em;
  font-family: var(--font-serif);
}
.serif .mono,
.serif-p-only .mono,
.serif-p-only code,
.serif code {
  font-size: 0.8em;
}
.serif .sans {
  font-size: 0.88em;
}
.mono {
  font-family: var(--font-mono);
}
.sans {
  font-size: 1.1em;
  font-family: var(--font-sans);
}
p.subtitle {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: var(--font-weight-light);
  margin-top: -0.75em;
}
.blog-description {
  display: none;
}
.fw-light {
  font-weight: var(--font-weight-light);
  font-variation-settings: 'wght' var(--font-weight-light);
}
.fw-normal {
  font-weight: var(--font-weight-normal);
  font-variation-settings: 'wght' var(--font-weight-normal);
}
.fw-bold {
  font-weight: var(--font-weight-bold);
  font-variation-settings: 'wght' var(--font-weight-bold);
}

/* Borders and shadows */
.border {
  border: var(--border);
  border-radius: var(--border-radius);
}
.shadow {
  box-shadow: var(--shadow);
}

/* Layout */
.flex {
  display: flex;
}
.justify-space-between {
  justify-content: space-between;
}

/* =============================== COMPONENTS =============================== */
/* Body, Main, and Footer */
body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  width: 100vw;

  > main {
    margin: 1rem 0 3rem 0;
  }
}

.site-title {
  font-size: 1.35rem;
}
.site-subtitle {
  margin: -0.75em 0 0.25rem 0;
}

article {
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  margin: 0 auto;
  max-width: 45rem;
  padding: 1rem 1.5rem;
}

/* Headings */
h1 {
  color: var(--primary);
  font-family: var(--font-mono);
  /* font-size: 2.5em; */
  font-size: 2.15rem;
  margin: 0 0 1rem 0;
}
h2 {
  color: var(--primary);
  font-family: var(--font-mono);
  /* font-size: 2em; */
  font-size: 1.8rem;
  margin: 2rem 0 0.75rem 0;
}
h3 {
  color: var(--primary);
  font-family: var(--font-mono);
  /* font-size: 1.75em; */
  font-size: 1.6rem;
  margin: 2rem 0 0.75rem 0;
}
h4 {
  color: var(--primary);
  font-family: var(--font-mono);
  /* font-size: 1.5em; */
  font-size: 1.35rem;
  margin: 2rem 0 0.75rem 0;
}
h5 {
  color: var(--primary);
  font-family: var(--font-mono);
  /* font-size: 1.25em; */
  font-size: 1.125rem;
  margin: 2rem 0 0.75rem 0;
}
h6 {
  color: var(--primary);
  font-family: var(--font-mono);
  /* font-size: 1em; */
  font-size: 1rem;
  margin: 2rem 0 0.75rem 0;
}
p {
  margin: 0 0 1rem 0;
}

/* Breaks */
hr {
  width: 100%;
  border: none;
  box-shadow: none;
  height: 1px;
  background-color: var(--text-faint);
  margin: 2rem auto;
}

/* Typography */
a,
a:visited {
  color: var(--secondary);
  text-decoration: none;
  overflow-wrap: break-word;
}

a:hover {
  color: var(--secondary-alt);
  text-decoration: underline;
}

a:focus,
a:focus-within,
a:focus-visible,
pre:focus,
pre:focus-within,
pre:focus-visible {
  border-radius: var(--border-radius);
  opacity: 1;
  outline: 2px solid var(--secondary);
}

blockquote {
  background: var(--bg-layer-2);
  border-radius: var(--border-radius);
  color: var(--text-muted);
  padding: 1rem 2rem 1rem 2rem;
  margin: 1rem 0;

  > p:first-child {
    margin-top: 0;
  }
  > p:last-child {
    margin-bottom: 0;
  }
}

sup {
  vertical-align: top;
}

code {
  background-color: var(--bg-layer-2);
  border-radius: var(--border-radius);
  color: var(--secondary);
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.25em;
}

mark,
marktext {
  color: inherit;
  background-color: var(--text-selection);
}

pre {
  width: 100%;
  overflow-x: scroll;
}

pre > code {
  padding: 0;
}

li {
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}

.text-center {
  text-align: center;
}

/* Images */
img {
  width: 100%;
  height: 400px;
  object-fit: contain;
}

/* Icons */
svg {
  fill: var(--primary);
}

.fa-primary {
  opacity: 0.95;
  fill: var(--primary);
}
.fa-secondary {
  opacity: 0.8;
  fill: var(--secondary);
}
.icon.inline > svg {
  height: 0.75em;
  width: 1em;
}
.icon.invert .fa-primary {
  fill: var(--secondary);
}
.icon.invert .fa-secondary {
  fill: var(--primary);
}
.icon.swap .fa-primary {
  opacity: 0.8;
}
.icon.swap .fa-secondary {
  opacity: 0.95;
}

@media (prefers-color-scheme: dark) {
  .fa-primary {
    opacity: 0.8;
    fill: var(--primary);
  }
  .fa-secondary {
    opacity: 0.95;
    fill: var(--secondary);
  }
  .icon.swap .fa-primary {
    opacity: 0.95;
  }
  .icon.swap .fa-secondary {
    opacity: 0.9;
  }
  .icon.contrast svg {
    fill: var(--white);
  }
  .icon.contrast .fa-primary {
    fill: var(--white);
  }
  .icon.contrast .fa-secondary {
    fill: var(--white);
    opacity: 0.4;
  }
  .icon.invert.contrast .fa-primary {
    fill: var(--white);
    opacity: 0.4;
  }
  .icon.invert.contrast .fa-secondary {
    fill: var(--white);
    opacity: 0.95;
  }
}

@media (prefers-color-scheme: light) {
  .icon.contrast svg {
    fill: var(--black);
  }
  .icon.contrast .fa-primary {
    fill: var(--black);
  }
  .icon.contrast .fa-secondary {
    fill: var(--dark-grey);
  }
  .icon.invert.contrast .fa-primary {
    fill: var(--dark-grey);
  }
  .icon.invert.contrast .fa-secondary {
    fill: var(--black);
  }
}

/* Tables */
div.table-wrapper {
  width: 100%;
  overflow-x: scroll;
}

table {
  background: var(--table-lighter);
  border-collapse: separate;
  border-radius: var(--border-radius);
  border-spacing: 0px;
  display: table;
  margin: 1rem 0;
  overflow: scroll;
  table-layout: auto;
  width: 100%;
}

/* tbody {
  display: table;
  width: 100%;
}

thead,
tfoot {
  display: table;
  width: 100%;
}

tr {
  display: table-row;
  width: 100%;
} */

table th,
table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
}

table th {
  border-bottom: var(--border);
  border-bottom-color: var(--primary);
}

table tr:nth-child(2n + 1) {
  background: var(--table-darker);
}

/* table th:last-child,
table td:last-child {
  border-right: var(--border);
}

table tr:last-child th,
table tr:last-child td {
  border-bottom: var(--border);
} */

table tr:first-child th:first-child,
table tr:first-child td:first-child {
  border-top-left-radius: var(--border-radius);
}

table tr:first-child th:last-child,
table tr:first-child td:last-child {
  border-top-right-radius: var(--border-radius);
}

table tr:last-child td:first-child {
  border-bottom-left-radius: var(--border-radius);
}

table tr:last-child td:last-child {
  border-bottom-right-radius: var(--border-radius);
}

/* Nav */
body nav {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: 1.75em;
  margin: 0;
  margin-bottom: 0.75rem;
  overflow: auto;
  padding: 0.5rem 2rem;
}

.nav-logo {
  align-items: center;
  display: flex;
  letter-spacing: 1px;
  margin-top: -0.125em;
}

.nav-logo .nav-link {
  padding: 0 0.5rem;
}

.nav-icons {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

.nav-socials {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 1.75rem;
  margin-top: 0.5rem;
  max-width: 100%;
}

a.title-link,
a.title-link:visited {
  display: block;
  color: var(--primary);
  margin: 0 auto;
  min-width: 2.5rem;
  padding: 0 1.25em;
  text-align: center;
  width: fit-content;
}
a.title-link:hover,
a.title-link:focus {
  color: var(--primary);
}

a.nav-link,
a.nav-link:visited {
  color: var(--primary);
  min-width: 2.5rem;
  opacity: 0.75;
  text-align: center;
  text-decoration: none;
}

a.nav-link:hover,
a.nav-link:focus {
  color: var(--primary);
  text-decoration: none;
  opacity: 1;
}

a.nav-link.icon {
  align-items: center;
  display: flex;
  font-size: 1rem;
  height: 1.75rem;
  justify-content: center;
  margin-left: 0.25rem;
  width: 2.5rem;
}
a.nav-link.icon > svg {
  height: 1.25rem;
  width: 1.5rem;
}
a.nav-link.icon.adjust-smaller > svg {
  height: 1.2rem;
}

@media (max-width: 45rem) {
  body > nav {
    padding: 0.5rem 0;
  }

  .nav-icons {
    margin-left: 0;
  }
}

.prism-noscript {
  background: var(--bg-layer-2);
  color: var(--text-muted);
  margin: 1rem auto;
  max-width: 45rem;
  padding: 1rem 2rem;
}

/* Footer */
body > footer {
  /* border-top: 1px solid var(--bg-layer-2); */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: auto 0 0 0;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0px auto;
  max-width: 75rem;
  padding: 4.75rem 2rem 1rem 2rem;
  width: 100%;
}

.footer-mission {
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  max-width: 28rem;
  min-width: 10em;
  padding: 0px 1rem 1.5rem;
}

.footer-links {
  padding: 0px 1rem 1.5rem;
  display: flex;
  flex-direction: column;
}

.footer-links ul {
  padding: 0;
  margin: 0;
}

.footer-links li {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 0.5rem;
}

.footer-links li a,
.footer-links li a.nav-link:visited {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  margin-left: -0.4rem;
  padding: 0 0.5rem;
  opacity: 0.75;
  text-decoration: none;
}

.footer-links li a.nav-link:hover,
.footer-links li a.nav-link:focus {
  text-decoration: none;
  opacity: 1;
}

.footer-links li svg {
  height: 1em;
  fill: var(--text-faint);
  margin-right: 1rem;
  vertical-align: center;
}

/* Content pages */
.metadata-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-family: var(--font-mono);
}

a.tag,
a.tag:visited {
  background: var(--tag);
  border-radius: 100rem;
  color: var(--primary);
  padding: 0.15em 0.5em 0.075em 0.5em;
  font-family: var(--font-mono);
  font-size: 0.85em;
}

a.tag:hover {
  background: var(--primary);
  color: var(--tag);
  text-decoration: none;
}

/* Note Layout */
div.note-layout {
  overflow-x: hidden;
}

@media (min-width: 105rem) {
  div.note-layout article {
    position: relative;
  }

  section.note-links {
    position: absolute;
    padding: 0 2rem;
    left: 100%;
    top: 1.5rem;
    min-width: 25rem;
  }
}

section.note-links {
  font-size: 0.9em;
  margin: 0;
  max-width: 45rem;
}

section.note-links .link-header {
  align-items: center;
  color: var(--primary);
  display: flex;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: var(--font-weight-light);
  margin: 0;
}

section.note-links .link-header svg {
  font-size: 1.5em;
  margin: 0.25em 0.15em 0 0;
}

section.note-links ul {
  margin: 0 0 1.5rem 0;
  padding-left: 1.5rem;
}

/* Asides */
aside {
  border-radius: var(--border-radius);
  background-color: var(--bg-layer-2);
  margin-bottom: 1em;
  padding: 0.5em 0.75em;
}

/* HTML Objects, (pdfs etc) */
object {
  width: 100%;
}

/* Math */
math {
  overflow: hidden;
  text-wrap: nowrap;
}

math[display='block'] {
  margin: 1.25em 0;
  font-size: 1.125em;
}

/* Miscellaneous and one-off classes */
.ozymandias {
  font-variant: small-caps;
  margin-left: 1em;
}