@font-face {
    font-family: Graphik-Light;
    src: url(../fonts/Graphik/Graphik-Light-Web.woff2) format('woff2'), url(../fonts/Graphik/Graphik-Light.ttf) format('truetype');
    font-weight: 300;
    font-style: normal;
}

  :root {
    --portal-ink: #030712;
    --portal-muted: #4b5563;
    --portal-line: #e5e7eb;
    --portal-button-line: #d1d5db;
    --portal-purple: #7640cc;
    --portal-purple-light: #b194f9;
    --portal-lilac: #f5f3ff;
    --portal-surface: #ffffff;
    --portal-surface-hover: #f9fafb;
  }

  [data-md-color-scheme="slate"] {
    --portal-ink: #f5f7fb;
    --portal-muted: #b5bfce;
    --portal-line: #303846;
    --portal-button-line: #4b5563;
    --portal-purple: #b194f9;
    --portal-purple-light: #7640cc;
    --portal-lilac: #2a2040;
    --portal-surface: #111722;
    --portal-surface-hover: #1c2431;
  }

@font-face {
    font-family: Graphik-LightItalic;
    src: url(../fonts/Graphik/Graphik-LightItalic-Web.woff2) format('woff2'), url('../fonts/Graphik/Graphik-Light Italic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: Graphik-Bold;
    src: url(../fonts/Graphik/Graphik-Bold-Web.woff2) format('woff2'), url(../fonts/Graphik/Graphik-Bold.ttf) format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: Graphik;
    src: url(../fonts/Graphik/Graphik-Regular-Web.woff2) format('woff2'), url(../fonts/Graphik/Graphik-Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: Graphik-Medium;
    src: url(../fonts/Graphik/Graphik-Medium-Web.woff2) format('woff2'), url(../fonts/Graphik/Graphik-Medium.ttf) format('truetype');
    font-weight: 500;
    font-style: normal;
}

body {
  color: var(--portal-ink);
  background: var(--portal-surface);
    font-size: 14px;
    font-family: "Graphik", sans-serif;
}

.md-header {
  background: var(--portal-surface);
  color: var(--portal-ink);
  box-shadow: 0 1px 0 var(--portal-line);
}

.md-header__button,
.md-header__title,
.md-tabs__link,
.md-header .md-icon {
  color: var(--portal-ink);
}

.md-tabs {
  background: var(--portal-surface);
  color: var(--portal-ink);
  border-bottom: 1px solid var(--portal-line);
}

.md-tabs__link {
  opacity: 1;
  font-weight: 500;
}

.md-tabs__link:hover,
.md-tabs__link--active {
  color: var(--portal-purple);
}

.md-sidebar {
  border-right: 1px solid var(--portal-line);
}

.md-nav__link {
  color: var(--portal-muted);
}

.md-nav__link:hover,
.md-nav__link--active {
  color: var(--portal-ink);
}

.md-nav__link--active {
  background: var(--portal-lilac);
  border-radius: 6px;
  font-weight: 500;
}

.md-content {
  max-width: 940px;
}

h1 {
   font-family: "Graphik-Medium", sans-serif;
  color: var(--portal-ink);
  letter-spacing: 0;
}

h2 {
    font-family: "Graphik-Medium", sans-serif;
  color: var(--portal-ink);
  letter-spacing: 0;
}

h3 {
    font-family: "Graphik-Medium", sans-serif;
  color: var(--portal-ink);
  letter-spacing: 0;
}

h4 {
    font-family: "Graphik-Light", sans-serif;
    font-size: 16px;
}

.md-typeset a {
  color: var(--portal-purple);
}

.md-typeset a:hover {
  color: var(--portal-ink);
}

.md-typeset .md-button {
  border-radius: 6px;
  border-color: var(--portal-button-line);
  color: var(--portal-ink);
  font-weight: 500;
}

.md-typeset .md-button--primary {
  background: var(--portal-ink);
  border-color: var(--portal-ink);
  color: #fff;
}

.md-typeset .md-button:hover {
  background: var(--portal-surface-hover);
  border-color: var(--portal-button-line);
  color: var(--portal-ink);
}

.md-typeset .md-button--primary:hover {
  background: #374151;
  border-color: #374151;
  color: #fff;
}

.md-typeset code {
  background: var(--portal-lilac);
  color: var(--portal-ink);
  border-radius: 4px;
}

.md-typeset pre > code {
  background: #f7f8fa;
  border: 1px solid var(--portal-line);
  border-radius: 6px;
}

.md-search__form {
  border: 1px solid var(--portal-line);
  border-radius: 6px;
  background: var(--portal-surface);
}

.md-search__form:hover,
.md-search__form:focus-within {
  border-color: var(--portal-button-line);
}

.md-search__input,
.md-search__icon {
  color: var(--portal-ink);
}

.md-footer {
  background: var(--portal-surface);
  color: var(--portal-muted);
  border-top: 1px solid var(--portal-line);
}

@media only screen and (min-width: 76.25em) {
  .md-content-no-toc {
    /*margin-left: 12.1rem;*/
  }
  .md-sidebar-no-toc {
    width: 181px;
  }
}

@media only screen and (min-width: 60em) {
  .md-content-no-toc {
    margin-right: 0;
  }
}