/* Dark field: canvas ink, not Material default navy. */
:root,
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #12161c;
  --md-default-bg-color--light: #12161c;
  --md-default-bg-color--lighter: #1a222c;
  --md-default-bg-color--lightest: #242c36;
  --md-default-fg-color: #e8eef2;
  --md-default-fg-color--light: #c8d2d8;
  --md-default-fg-color--lighter: #9aa6ae;
  --md-default-fg-color--lightest: #6e7880;
  --md-typeset-color: #e8eef2;
  --md-typeset-a-color: #b7d4ea;
  --md-accent-fg-color: #b7d4ea;
  --md-accent-fg-color--transparent: rgba(183, 212, 234, 0.12);
  --md-primary-fg-color: #1a222c;
  --md-primary-fg-color--light: #242c36;
  --md-primary-fg-color--dark: #0e1217;
  --md-primary-bg-color: #e8eef2;
  --md-code-bg-color: #1a222c;
  --md-code-fg-color: #e8eef2;
  --md-footer-bg-color: #0e1217;
  --md-footer-bg-color--dark: #0a0d11;
  --md-footer-fg-color: #e8eef2;
  --md-default-header-bg-color: #12161c;
}

/*
  Material sets html to 125% and .md-typeset to 0.8rem, so body copy
  lands at 16px. Pin html/body and typeset to 22px; headings stay in
  Material's em ratios off that typeset size.
*/
html {
  font-size: 22px;
}

body {
  font-size: 22px;
  background-color: #12161c;
  color: #e8eef2;
}

.md-typeset {
  font-size: 22px;
  line-height: 1.8;
  font-weight: 400;
}

.md-typeset h1 {
  font-size: 2em;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #e8eef2;
}

.md-typeset h2 {
  font-size: 1.5625em;
  font-weight: 700;
  margin-top: 2em;
  padding-bottom: 0.2em;
  border-bottom: 1px solid #2a3340;
  color: #e8eef2;
}

.md-typeset h3 {
  font-size: 1.25em;
}

.md-typeset p,
.md-typeset li {
  font-size: 22px;
}

.md-nav,
.md-header,
.md-footer,
.md-tabs {
  font-size: 20px;
}

.md-header {
  background-color: #12161c;
  box-shadow: none;
  border-bottom: 1px solid #2a3340;
}

.md-main {
  background-color: #12161c;
}

.md-sidebar {
  background-color: #12161c;
}