html[data-theme='light'] {
  --markdown-text-intro-c: rgb(53, 64, 78);
}

html[data-theme='dark'] {
  --markdown-text-intro-c: rgb(206, 214, 224);
}

.markdown {
  --ifm-heading-vertical-rhythm-bottom: 0.6;
  --ifm-heading-vertical-rhythm-top: 2;
  --ifm-h2-vertical-rhythm-top: 2.75;
  --ifm-h3-vertical-rhythm-top: 2.25;

  --ifm-h2-font-size: 2rem;
  --ifm-h3-font-size: 1.5rem;
  --ifm-h4-font-size: 1.25rem;
  --ifm-h5-font-size: 1rem;
  --ifm-h6-font-size: 0.875rem;

  strong,
  b {
    font-weight: 600;
  }

  code {
    border: 1px solid var(--ifm-code-background);
    font-size: 95%;
  }

  pre{
    code {
      border: none;
      font-size: 0.813rem;
    }
  }

  .encapsulation-pill {
    position: absolute;
    top: calc(var(--ifm-navbar-height) + 4rem);
  }

  > * {
    max-width: 100%;
  }

  p, li, td, tr {
    font-size: 1rem;
  }

  p,
  li,
  .tabs-container {
    line-height: 200%;
  }

  header > h1 {
    --ifm-h1-font-size: clamp(2.5rem, 8vw, 3.5rem);
    font-size: var(--ifm-h1-font-size);
  }

  h1, h2, h3, h4, h5, h6 {
    > a {
      color: inherit;
    }
  }

  h1 {
    margin-block-start: 5rem;
  }

  h4 {
    code {
      font-weight: normal;
    }
  }

  h2 + h3,
  h3 + h4,
  h4 + h5,
  h5 + h6 {
    margin-block-start: 1rem;
  }

  > header + p {
    color: var(--markdown-text-intro-c);
    font-size: 1.25rem;
  }
}
