:root {
  --wwl-blue: #0094ff;
  --wwl-pink: #ff00c7;
  --wwl-dark: #251b3c;
  --wwl-lilac: #918aca;
  --wwl-accent: #ff8a48;

  --md-primary-fg-color: #251b3c;
  --md-primary-fg-color--light: #918aca;
  --md-primary-fg-color--dark: #1a1329;
  --md-accent-fg-color: #0094ff;
}

.md-header {
  background: linear-gradient(92deg, var(--wwl-blue) 0%, var(--wwl-pink) 100%);
  box-shadow: 0 8px 24px rgba(37, 27, 60, 0.2);
}

.md-tabs {
  background: rgba(37, 27, 60, 0.92);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-nav__title,
.md-nav__item--section > .md-nav__link {
  font-family: "SF Pro Rounded", "SF Pro Text", "Roboto", "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
}

.md-typeset h1 {
  color: var(--wwl-dark);
}

.md-typeset h2 {
  border-left: 4px solid var(--wwl-blue);
  padding-left: 0.6rem;
}

.md-nav__link:hover,
.md-nav__link:focus,
.md-nav__link--active {
  color: var(--wwl-blue);
}

.md-search-result__article--document .md-search-result__title {
  color: var(--wwl-dark);
}

.md-top,
.md-typeset .md-button,
.md-typeset .md-button--primary {
  border-radius: 10px;
}

.md-typeset .md-button--primary {
  background: linear-gradient(92deg, var(--wwl-blue), var(--wwl-pink));
  border: 0;
}

.md-typeset a {
  color: #0076cc;
}

.md-typeset a:hover {
  color: var(--wwl-pink);
}

.md-content__inner {
  max-width: 980px;
}

@media (max-width: 76.2344em) {
  .md-header {
    background: linear-gradient(100deg, var(--wwl-blue) 0%, var(--wwl-pink) 90%);
  }
}

/* Brand logo: render at natural visual width */
.md-header__button.md-logo img,
.md-header__button.md-logo svg,
.md-nav__title .md-logo img,
.md-nav__title .md-logo svg {
  width: 200px !important;
  height: auto !important;
  max-height: none !important;
}

.md-header__button.md-logo,
.md-nav__title .md-logo {
  margin: 0;
  padding: 0 0.2rem;
}

.md-header__inner {
  min-height: 3.35rem;
}

@media (max-width: 44.9375em) {
  .md-header__button.md-logo img,
  .md-header__button.md-logo svg,
  .md-nav__title .md-logo img,
  .md-nav__title .md-logo svg {
    width: 160px !important;
  }

  .md-header__inner {
    min-height: 3rem;
  }
}