@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Overpass+Mono:wght@300..700&display=swap");

:root {
  --md-text-font: "Inter", sans-serif;
  --md-code-font: "Overpass Mono", monospace;
  --md-typeset-color: #ffffff !important;
  --md-dark-grey-color: rgba(67, 88, 101, 0.5);
  --md-nav-icon--next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13px' height='19px' viewBox='0 0 18 26' fill='none'%3E%3Cpath d='M11.7701 8.6669C10.2407 8.66689 9.00091 9.8608 9.00091 11.3336C9.00091 9.8608 7.76108 8.66689 6.23167 8.6669C7.76108 8.6669 9.0009 7.47299 9.0009 6.00023C9.00091 7.47299 10.2407 8.6669 11.7701 8.6669Z' fill='white'/%3E%3Cpath d='M11.7701 17.3336C10.2407 17.3336 9.00091 18.5275 9.00091 20.0002C9.00091 18.5275 7.76108 17.3336 6.23167 17.3336C7.76108 17.3336 9.0009 16.1397 9.0009 14.6669C9.00091 16.1397 10.2407 17.3336 11.7701 17.3336Z' fill='white'/%3E%3Cpath d='M6.23077 1.45705e-07C7.76017 2.10081e-07 9 1.19391 9 2.66667L9.0009 6.00023C9.0009 7.47299 7.76108 8.6669 6.23167 8.6669L2.76923 8.66667C1.23983 8.66667 -6.68524e-08 7.47276 0 6L1.51309e-07 2.66667C2.18161e-07 1.19391 1.23983 -6.43764e-08 2.76923 0L6.23077 1.45705e-07Z' fill='white'/%3E%3Cpath d='M2.76923 26C1.23983 26 1.68106e-07 24.8061 3.68663e-07 23.3333L8.22589e-07 20C1.02315e-06 18.5272 1.23983 17.3333 2.76923 17.3333L6.23167 17.3336C7.76108 17.3336 9.00091 18.5275 9.00091 20.0002L9 23.3333C9 24.8061 7.76017 26 6.23077 26H2.76923Z' fill='white'/%3E%3Cpath d='M18 14.6667C18 16.1394 16.7602 17.3333 15.2308 17.3333L11.7701 17.3336C10.2407 17.3336 9.00091 16.1397 9.0009 14.6669L9.00091 11.3336C9.00091 9.8608 10.2407 8.66689 11.7701 8.6669L15.2308 8.66667C16.7602 8.66667 18 9.86058 18 11.3333V14.6667Z' fill='white'/%3E%3C/svg%3E") !important;
}

[data-md-color-scheme="slate"] {
  --md-default-fg-color: hsl(0, 0%, 100%);
  --md-default-fg-color--light: hsla(225, 15%, 90%, 0.56);
  --md-default-fg-color--lighter: hsla(225, 15%, 90%, 0.32);
  --md-default-fg-color--lightest: hsla(225, 15%, 90%, 0.12);
  --md-default-bg-color: hsla(225, 15%, 14%, 1);
  --md-default-bg-color--light: hsla(225, 15%, 14%, 0.54);
  --md-default-bg-color--lighter: hsla(225, 15%, 14%, 0.26);
  --md-default-bg-color--lightest: hsla(225, 15%, 14%, 0.07);
  --md-code-fg-color: hsla(225, 18%, 86%, 0.82);
  --md-code-bg-color: hsla(225, 15%, 18%, 1);
  --md-code-hl-color--light: #4287ff26;
  --md-code-hl-number-color: #e6695b;
  --md-code-hl-special-color: #f06090;
  --md-code-hl-function-color: #c973d9;
  --md-code-hl-constant-color: #9383e2;
  --md-code-hl-keyword-color: #6791e0;
  --md-code-hl-string-color: #2fb170;
  --md-code-hl-name-color: var(--md-code-fg-color);
  --md-code-hl-operator-color: var(--md-default-fg-color--light);
  --md-code-hl-punctuation-color: var(--md-default-fg-color--light);
  --md-code-hl-comment-color: var(--md-default-fg-color--light);
  --md-code-hl-generic-color: var(--md-default-fg-color--light);
  --md-code-hl-variable-color: var(--md-default-fg-color--light);
  --md-typeset-color: var(--md-default-fg-color);
  --md-typeset-a-color: var(--md-primary-fg-color);
  --md-typeset-kbd-color: hsla(225, 15%, 90%, 0.12);
  --md-typeset-kbd-accent-color: hsla(225, 15%, 90%, 0.2);
  --md-typeset-kbd-border-color: hsla(225, 15%, 14%, 1);
  --md-typeset-mark-color: rgba(227, 138, 138, 0.3) !important;
  --md-typeset-table-color: hsla(225, 15%, 95%, 0.12);
  --md-typeset-table-color--light: hsla(225, 15%, 95%, 0.035);
  --md-admonition-fg-color: var(--md-default-fg-color);
  --md-admonition-bg-color: var(--md-default-bg-color);
  --md-footer-bg-color: hsla(225, 15%, 10%, 0.87);
  --md-footer-bg-color--dark: hsla(225, 15%, 8%, 1);
  --md-shadow-z1: 0 0.2rem 0.5rem #0000000d, 0 0 0.05rem #0000001a;
  --md-shadow-z2: 0 0.2rem 0.5rem #00000040, 0 0 0.05rem #00000040;
  --md-shadow-z3: 0 0.2rem 0.5rem #0006, 0 0 0.05rem #00000059;
  color-scheme: dark;
}

[data-md-color-primary="indigo"] {
  --md-primary-fg-color: #e791ba !important;
  --md-primary-fg-color--light: #eeb2ce !important;
  --md-primary-fg-color--dark: #a16582 !important;
  --md-primary-bg-color: #fff;
  --md-primary-bg-color--light: #ffffffb3;
}

[data-md-color-scheme="slate"][data-md-color-primary="indigo"] {
  --md-typeset-a-color: #e791ba !important;
}

[data-md-color-accent="indigo"] {
  --md-accent-fg-color: #e791ba !important;
  --md-accent-fg-color--transparent: #e791ba1a !important;
  --md-accent-bg-color: #fff !important;
  --md-accent-bg-color--light: #ffffffb3;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-blend-mode: multiply;
  background:
    linear-gradient(0deg, rgb(0, 0, 0), hsla(202, 20%, 42%, 0.4)) fixed,
    radial-gradient(137.76% 92.75% at -10% -10%, rgb(0, 0, 0), hsla(217, 32%, 40%, 0.42)) fixed,
    url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='8.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")
      fixed;
  z-index: -1;
}

/******************************* TYPOGRAPHY ***************************/
h1,
h2,
h3,
h4,
h5,
h6,
label {
  font-family: "Overpass Mono", monospace;
  text-transform: uppercase;
  color: var(--md-default-fg-color) !important;
}

.md-typeset h1,
h1 {
  margin: 0 0 32px !important;
  font-size: 34px !important;
  font-weight: 400;
  line-height: 2.75rem !important;
  font-style: normal;
}

.md-typeset h2,
h2 {
  margin: 40px 0 12px !important;
  font-size: 24px !important;
  font-weight: 400;
  line-height: 1.875rem !important;
  font-style: normal;
}

.md-typeset h3,
h3 {
  margin: 40px 0 12px !important;
  font-size: 24px !important;
  font-weight: 400;
  line-height: 1.875rem !important;
  font-style: normal;
}

.md-typeset h4,
h4 {
  font-family: "Overpass Mono", monospace;
  text-transform: uppercase;
  margin: 24px 0 12px !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.25rem !important; /* 125% */
  letter-spacing: 0.02rem !important;
}

link {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 0.875rem;
}

label {
  font-family: "Overpass Mono", monospace;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25rem;
  font-style: normal;
}

code {
  font-family: "Overpass Mono", monospace;
}

span.filename {
  text-transform: capitalize !important;
}
span.filename,
code {
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.375rem;
  font-style: normal;
}

th {
  text-transform: capitalize !important;
}

th,
td {
  font-size: 14px;
  line-height: 1.25rem;
  font-style: normal;
}

/******************************* HEADER *******************************/
.md-header__topic {
  display: none;
}

.md-logo img {
  height: 1rem !important;
}

.md-header {
  background-color: transparent !important;
  box-shadow: none;
  margin-top: 24px;
}

/******************************* SIDEBAR ******************************/
.md-nav--primary .md-nav__title[for="__drawer"] {
  background-color: #1f212900;
  color: var(--md-primary-bg-color);
  font-weight: 700;
  display: none !important;
}

.md-nav__link {
  margin-top: 12px !important;
}

.md-nav__item--section {
  margin: 40px 0 !important;
}

.md-nav--primary .md-nav__title ~ .md-nav__list > :first-child {
  margin-top: 12px !important;
}
/******************************* MAIN *********************************/
.md-grid {
  margin-left: auto;
  margin-right: auto;
  max-width: 70rem !important;
}
/******************************* CONTENT ******************************/

.md-typeset table:not([class]) {
  background-color: var(--md-dark-grey-color);
}

span.filename,
code {
  color: var(--md-primary-bg-color) !important;
  background-color: var(--md-dark-grey-color) !important;
}

.md-clipboard:not(.focus-visible) {
  -webkit-tap-highlight-color: var(--md-primary-bg-color) !important;
  outline: none;
}

th,
td {
}

/******************************* NAVIGATION ***************************/
.md-nav--secondary .md-nav__title {
  box-shadow: none;
  background: none;
}

.md-nav__link {
  margin-top: 0.95rem;
}

.md-nav--primary .md-nav__title {
  box-shadow: none;
  background: none;
}

.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code {
  color: var(--md-primary-bg-color) !important;
  font-weight: 700 !important;
}

.md-nav__item {
  color: var(--md-default-fg-color--light) !important;
}

button.md-top[data-md-component="top"] {
  display: none !important;
}

/******************************* FOOTER *******************************/
.md-footer__title {
  font-family: "Overpass Mono", monospace;
  font-size: 16px !important;
  font-weight: 400;
  line-height: 1.25rem;
  font-style: normal;
  text-transform: uppercase;
}

.md-footer-meta {
  /*display: none;*/
  background-color: transparent;
}

.md-footer {
  background-color: unset;
}

.md-footer__button {
  margin: 0.2rem 0 0.5rem;
}

.md-footer__link {
  flex-grow: 1;
}
/******************************* SCROLL BAR + ICONS **************************/
.md-icon svg {
  fill: currentcolor;
  display: block;
  height: 0.8rem !important;
  width: 1rem;
}

.md-search__icon[for="__search"] {
  top: 0.5rem !important;
}

.md-nav--primary .md-nav__link .md-nav__icon:after {
  border-radius: 0 !important;
  -webkit-mask-size: 40% !important;
  mask-size: 40% !important;
}

.md-nav__icon:after {
  border-radius: 0 !important;
  -webkit-mask-size: 50% !important;
  mask-size: 50% !important;
}

/* For webkit-based browsers (Chrome, Safari) */
::-webkit-scrollbar {
  scrollbar-gutter: stable;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  margin: 0 0.2rem;
  overflow-y: auto;
  scrollbar-color: var(--md-code-bg-color) #0000;
  scrollbar-width: thin;
}

/* Handle */
::-webkit-scrollbar-thumb {
  /*background-color: #747474; !* Color of the scrollbar handle *!*/
  /*background-size: contain; !* Adjust to fit your image size *!*/
  border: none;
  border-radius: 4px;
}