html, body {
  overscroll-behavior-y: none;
}

:root {
  --md-primary-fg-color: #911DC3;
  --md-primary-fg-color--light: #B441F9;
  --md-primary-fg-color--dark: #331a4e;
}

/* Use a deep purple for the header / tabs bar, while keeping the brighter
   primary color for interactive accents (active tab, links, sidebar). */
.md-header,
.md-tabs {
  background-color: #331a4e;
}

.md-header__button.md-logo img {
  height: 2rem;
}

[dir=ltr] .md-header__title {
  margin-left: -8px;
  margin-right: .4rem;
  margin-top: 2px;
}

/* The logo already contains the "Flowingcode" wordmark, so replace the
   redundant site name in the header with a short "- Documentation".
   The full site_name "Flowing Code Documentation" is still used for the
   <title> tag, social cards, and search engine metadata. */
.md-header__topic:first-child .md-ellipsis {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.md-header__topic:first-child::after {
  content: "- Documentation";
  font-weight: 600;
}

.md-tabs__item {
  padding-right: unset;
}

.panzoom-box {
  background-color: var(--md-default-bg-color) !important;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #911DC3;
  --md-primary-fg-color--light: #B441F9;
  --md-primary-fg-color--dark: #331a4e;
}