:root {
  /* colors */
  --color-white: rgba(255, 255, 255, 1);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-white-75: rgba(255, 255, 255, 0.75);
  --color-white-80: rgba(255, 255, 255, 0.8);
  --color-white-15: rgba(255, 255, 255, 0.15);
  --color-smoke-10: rgba(254, 254, 254, 0.95);
  --color-smoke-30: rgba(250, 250, 250, 0.9);
  --color-smoke-50: rgba(245, 245, 245, 0.85);
  --color-smoke-70: rgba(240, 240, 240, 0.8);
  --color-smoke-90: rgba(225, 225, 225, 0.75);
  --color-gray-10: rgba(193, 193, 193, 0.7);
  --color-gray-30: rgba(156, 156, 156, 0.65);
  --color-gray-40: rgba(142, 142, 142, 0.6);
  --color-gray-50: rgba(128, 128, 128, 0.55);
  --color-gray-70: rgba(93, 93, 93, 0.5);
  --color-jet-20: rgba(74, 74, 74, 0.45);
  --color-jet-30: rgba(66, 66, 66, 0.4);
  --color-jet-50: rgba(51, 51, 51, 0.35);
  --color-jet-70: rgba(34, 34, 34, 0.3);
  --color-jet-80: rgba(25, 25, 25, 0.25);
  --color-black: rgba(0, 0, 0, 0.2);
  --color-black-75: rgba(0, 0, 0, 0.75);
  --color-black-15: rgba(0, 0, 0, 0.15);
  --color-blue-10: rgba(140, 210, 255, 0.95);
  /* fonts */
  --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
  --body-font-size: 1.0625em; /* 17px */
  --body-font-size--desktop: 1.125em; /* 18px */
  --body-font-size--print: 0.9375em; /* 15px */
  --body-line-height: 1.15;
  --body-font-color: var(--color-jet-70);
  --body-font-family: "Roboto", sans-serif;
  --body-font-weight-bold: 600;
  --monospace-font-family: "Roboto Mono", monospace;
  --monospace-font-weight-bold: 600;
  /* base */
  --body-background: var(--color-white);
  --panel-background: var(--color-black-75);
  --panel-border-color: var(--color-smoke-90);
  --scrollbar-track-color: var(--color-smoke-30);
  --scrollbar-thumb-color: var(--color-gray-10);
  --scrollbar_hover-thumb-color: var(--color-gray-30);
  /* navbar */
  --navbar-background: var(--color-jet-80);
  --navbar-font-color: var(--color-white);
  --navbar_hover-background: var(--color-black);
  --navbar_hover-font-color: var(--color-blue-10);
  --navbar-button-background: var(--color-white);
  --navbar-button-border-color: var(--panel-border-color);
  --navbar-button-font-color: var(--body-font-color);
  --navbar-menu-border-color: var(--panel-border-color);
  --navbar-menu-background: var(--color-white);
  --navbar-menu-font-color: var(--body-font-color);
  --navbar-menu_hover-background: var(--color-smoke-50);
  /* nav */
  --nav-background: var(--panel-background);
  --nav-border-color: var(--color-gray-10);
  --nav-line-height: 1.35;
  --nav-heading-font-color: var(--color-jet-30);
  --nav-muted-color: var(--color-gray-70);
  --nav-panel-divider-color: var(--color-smoke-90);
  --nav-secondary-background: var(--color-smoke-70);
  /* toolbar */
  --toolbar-background: var(--panel-background);
  --toolbar-border-color: var(--panel-border-color);
  --toolbar-font-color: var(--color-gray-70);
  --toolbar-muted-color: var(--color-gray-40);
  --page-version-menu-background: var(--color-smoke-70);
  --page-version-missing-font-color: var(--color-gray-40);
  /* admonitions */
  --caution-color: #a0439c;
  --caution-on-color: var(--color-white);
  --important-color: #d32f2f;
  --important-on-color: var(--color-white);
  --note-color: #217ee7;
  --note-on-color: var(--color-white);
  --tip-color: #41af46;
  --tip-on-color: var(--color-white);
  --warning-color: #e18114;
  --warning-on-color: var(--color-white);
  /* doc */
  --doc-font-color: var(--color-white-80);
  --doc-font-size: inherit;
  --doc-font-size--desktop: calc(17 / var(--rem-base) * 1rem);
  --doc-line-height: 1.6;
  --doc-margin: 0 auto;
  --doc-margin--desktop: 0 2rem;
  --heading-font-color: var(--color-jet-80);
  --heading-font-weight: normal;
  --alt-heading-font-weight: var(--body-font-weight-bold);
  --section-divider-color: var(--panel-border-color);
  --link-font-color: #ffc;
  --link_hover-font-color: #fff5b3;
  --link_unresolved-font-color: var(--important-color);
  --abstract-background: var(--color-smoke-70);
  --abstract-font-color: var(--color-jet-20);
  --abstract-border-color: var(--panel-border-color);
  --admonition-background: var(--color-white-15);
  --admonition-label-font-weight: var(--body-font-weight-bold);
  --caption-font-color: var(--color-white-50);
  --caption-font-style: italic;
  --caption-font-weight: var(--body-font-weight-bold);
  --code-background: var(--color-black-15);
  --code-font-color: var(--color-white);
  --example-background: var(--color-white);
  --example-border-color: var(--color-gray-70);
  --kbd-background: var(--panel-background);
  --kbd-border-color: var(--color-gray-10);
  --pre-background: rgb(40, 44, 52);
  --pre-border-color: var(--panel-border-color);
  --pre-annotation-font-color: var(--color-gray-50);
  --quote-background: var(--panel-background);
  --quote-border-color: var(--color-gray-70);
  --quote-font-color: var(--color-white-50);
  --quote-attribution-font-color: var(--color-gray-40);
  --sidebar-background: var(--color-black-15);
  --table-border-color: var(--panel-border-color);
  --table-stripe-background: var(--panel-background);
  --table-footer-background:
    linear-gradient(
      to bottom,
      var(--color-black-15) 0%,
      var(--color-black-15) 100%
    );
  /* toc */
  --toc-font-color: var(--nav-muted-color);
  --toc-heading-font-color: var(--color-white);
  --toc-border-color: var(--panel-border-color);
  --toc-line-height: 1.2;
  /* footer */
  --footer-line-height: var(--doc-line-height);
  --footer-background: var(--color-smoke-90);
  --footer-font-color: var(--color-gray-70);
  --footer-link-font-color: var(--color-jet-80);
  /* dimensions and positioning */
  --navbar-height: calc(63 / var(--rem-base) * 1rem);
  --toolbar-height: calc(45 / var(--rem-base) * 1rem);
  --drawer-height: var(--toolbar-height);
  --body-top: var(--navbar-height);
  --body-min-height: calc(100vh - var(--body-top));
  --nav-height: calc(var(--body-min-height) - var(--toolbar-height));
  --nav-height--desktop: var(--body-min-height);
  --nav-panel-menu-height: calc(100% - var(--drawer-height));
  --nav-panel-explore-height: calc(50% + var(--drawer-height));
  --nav-width: calc(270 / var(--rem-base) * 1rem);
  --toc-top: calc(var(--body-top) + var(--toolbar-height));
  --toc-height: calc(100vh - var(--toc-top) - 2.5rem);
  --toc-width: calc(162 / var(--rem-base) * 1rem);
  --toc-width--widescreen: calc(216 / var(--rem-base) * 1rem);
  --doc-max-width: calc(720 / var(--rem-base) * 1rem);
  --doc-max-width--desktop: calc(828 / var(--rem-base) * 1rem);
  /* stacking */
  --z-index-nav: 1;
  --z-index-toolbar: 2;
  --z-index-page-version-menu: 3;
  --z-index-navbar: 4;

  /* Background gradient position variables */
  --x1: 20%;
  --y1: 20%;
  --x2: 75%;
  --y2: 25%;
  --x3: 50%;
  --y3: 50%;
}
