@font-face { font-family: "Pixelify Sans"; font-weight: 600; src: url("fonts/PixelifySans-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Plex Sans"; font-weight: 400; src: url("fonts/PlexSans-Regular.ttf") format("truetype"); }
@font-face { font-family: "Plex Sans"; font-weight: 500; src: url("fonts/PlexSans-Medium.ttf") format("truetype"); }
@font-face { font-family: "Plex Sans"; font-weight: 600; src: url("fonts/PlexSans-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Plex Mono"; font-weight: 400 600; src: url("fonts/PlexMono-Medium.ttf") format("truetype"); }

:root {
  --flide-blue: #3a86ff;
  --flide-blue-d: #1f5fd1;
  --flide-blue-l: #a9c6ff;
  --md-text-font: "Plex Sans";
  --md-code-font: "Plex Mono";
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--flide-blue);
  --md-primary-fg-color--light: var(--flide-blue-l);
  --md-primary-fg-color--dark: var(--flide-blue-d);
  --md-accent-fg-color: var(--flide-blue-d);
  --md-default-fg-color: #2c3549;
  --md-typeset-color: #2c3549;
  --md-typeset-a-color: var(--flide-blue-d);
  --md-code-bg-color: #f5f7fb;
  --flide-caption: var(--flide-blue-d);
  --flide-active-bg: #eaf1ff;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--flide-blue);
  --md-primary-fg-color--light: var(--flide-blue-l);
  --md-primary-fg-color--dark: var(--flide-blue-d);
  --md-accent-fg-color: var(--flide-blue-l);
  --md-typeset-a-color: #6fa6ff;
  --md-default-bg-color: #1b2333;
  --md-code-bg-color: #141b28;
  --flide-caption: #6fa6ff;
  --flide-active-bg: #26314a;
}

/* text a little smaller than Material's default */
.md-typeset { font-size: .74rem; line-height: 1.65; }
.md-typeset table:not([class]) { font-size: .68rem; }
.md-typeset code { font-size: .88em; }
.md-typeset pre { font-size: .9em; }

/* pixel headings, as in the README */
.md-typeset h1, .md-typeset h2 {
  font-family: "Pixelify Sans", var(--md-text-font-family);
  font-weight: 600;
  color: var(--md-default-fg-color);
  letter-spacing: 0;
}
.md-typeset h1 { font-size: 1.7em; margin-bottom: .9em; }
.md-typeset h2 { font-size: 1.3em; margin-top: 1.8em; }
.md-typeset h3 { font-weight: 600; }

.md-header__title { font-family: "Pixelify Sans", var(--md-text-font-family); font-size: 1rem; }

/* a wider column, so the requests fit on a line */
.md-grid { max-width: 70rem; }

/* section tabs under the header */
.md-tabs__link { font-size: .68rem; font-weight: 500; opacity: .8; }
.md-tabs__item--active .md-tabs__link { opacity: 1; }

/* the dark scheme gets a dark header, the light one keeps the blue */
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs { background-color: #141b28; }
[data-md-color-scheme="slate"] .md-tabs { box-shadow: inset 0 -1px 0 #26314a; }
[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link { color: #6fa6ff; }

/* sidebar: section captions in the pixel font, the current page marked in blue */
.md-nav { font-size: .66rem; }
.md-sidebar--primary .md-nav__item--section > .md-nav__link,
.md-sidebar--primary .md-nav--primary > .md-nav__title {
  font-family: "Pixelify Sans", var(--md-text-font-family);
  font-size: .74rem;
  color: var(--flide-caption);
}
.md-sidebar--primary .md-nav__link--active {
  color: var(--md-typeset-a-color);
  background: var(--flide-active-bg);
  border-radius: .2rem;
  margin-left: -.4rem;
  padding: .15em .4rem;
  font-weight: 500;
}
.md-sidebar--secondary .md-nav { font-size: .64rem; }