:root {
    /* Border */
    --border: 0.0625rem solid var(--color-border);
    --border-card: var(--border);
    --border-code: var(--border);

    /* Colors */
    --gray-1: #202224;
    --gray-2: #2D2D2D;
    --gray-3: #555759;
    --gray-4: #6e7072;
    --gray-5: #848688;
    --gray-6: #aaacae;
    --gray-7: #c6c8ca;
    --gray-8: #dcdee0;
    --gray-9: #f0f1f2;
    --gray-10: #f8f8f8;
    --turq-light: #5dc9e2;
    --turq-med: #50b7e0;
    --turq-dark: #007d9c;
    --abbey: #3f4042;
    --blue: #bfeaf4;
    --blue-light: #f2fafd;
    --black-1: #000;
    --black-2: #111111;
    --deep-cerulian: #007F9f;
    --green: #3a6e11;
    --green-light: #5fda64;
    --pink: #c85e7a;
    --pink-light: #fdecf1;
    --purple: #542c7d;
    --shark: #2B2D2F;
    --slate: #253443; /* Footer background. */
    --tundora: #414141;
    --white: #fff;
    --yellow: #fddd00;
    --yellow-light: #fff8cc;
    --testimonial: #007F9f;

    /* Color Intents */
    --color-brand-primary: var(--turq-dark);
    --color-background: var(--white);
    --color-background-inverted: var(--slate);
    --color-background-accented: var(--gray-10);
    --color-background-highlighted: var(--blue);
    --color-background-highlighted-link: var(--blue-light);
    --color-background-info: var(--gray-9);
    --color-background-warning: var(--yellow-light);
    --color-background-alert: var(--pink-light);
    --color-background-banner: var(--turq-dark);
    --color-background-card-footer: var(--gray-10);
    --color-background-carousel-button: var(--white);
    --color-background-code: var(--gray-10);
    --color-background-logo: rgba(248, 248, 248, 0.9);
    --color-background-playground-input: #ffffdd;
    --color-background-testimonial: var(--deep-cerulian);
    --color-border: var(--gray-7);
    --color-text: var(--gray-1);
    --color-text-link: var(--turq-dark);
    --color-text-subtle: var(--gray-4);
    --color-text-inverted: var(--white);
    --color-code-comment: var(--green);

    /* Interactive Colors */
    --color-input: var(--color-background);
    --color-input-text: var(--color-text);
    --color-button: var(--turq-dark);
    --color-button-disabled: var(--gray-9);
    --color-button-text: var(--white);
    --color-button-text-disabled: var(--gray-3);
    --color-button-inverted: var(--color-background);
    --color-button-inverted-disabled: var(--color-background);
    --color-button-inverted-text: var(--color-brand-primary);
    --color-button-inverted-text-disabled: var(--color-text-subtle);
    --color-button-accented: var(--yellow);
    --color-button-accented-disabled: var(--gray-9);
    --color-button-accented-text: var(--gray-1);
    --color-button-accented-text-disabled: var(--gray-3);
  }
  [data-theme='dark'] {
    --border-card: 0.0625rem solid transparent;
    --border-code: 0.0625rem solid var(--tundora);

    --color-brand-primary: var(--turq-dark);
    --color-background: var(--gray-1);
    --color-background-accented: var(--gray-2);
    --color-background-highlighted: var(--gray-2);
    --color-background-highlighted-link: var(--gray-2);
    --color-background-info: var(--gray-3);
    --color-background-warning: var(--yellow);
    --color-background-alert: var(--pink);
    --color-background-banner: rgba(0, 125, 156, 0.75);
    --color-background-banner-secondary: rgba(248, 248, 248, 0.9);
    --color-background-card-footer: var(--gray-1);
    --color-background-carousel-button: var(--gray-5);
    --color-background-code: var(--shark);
    --color-background-logo: rgba(248, 248, 248, 0.9);
    --color-background-playground-input: var(--slate);
    --color-background-testimonial: var(--gray-2);
    --color-button-text-disabled: var(--gray-6);
    --color-border: var(--gray-4);
    --color-text: var(--gray-9);
    --color-text-link: var(--turq-med);
    --color-text-subtle: var(--gray-7);
    --color-code-comment: var(--green-light);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      --border-card: 0.0625rem solid transparent;
      --border-code: 0.0625rem solid var(--tundora);

      --color-brand-primary: var(--turq-dark);
      --color-background: var(--gray-1);
      --color-background-accented: var(--gray-2);
      --color-background-highlighted: var(--gray-2);
      --color-background-highlighted-link: var(--gray-2);
      --color-background-info: var(--gray-3);
      --color-background-warning: var(--yellow);
      --color-background-alert: var(--pink);
      --color-background-banner: rgb(0, 125, 156, 0.75);
      --color-background-banner-secondary: rgba(248, 248, 248, 0.9);
      --color-background-card-footer: var(--gray-1);
      --color-background-carousel-button: var(--gray-5);
      --color-background-code: var(--shark);
      --color-background-logo: rgba(248, 248, 248, 0.9);
      --color-background-playground-input: var(--slate);
      --color-background-testimonial: var(--gray-2);
      --color-button-primary: var(--yellow-primary);
      --color-button-text-disabled: var(--gray-6);
      --color-border: var(--gray-4);
      --color-text: var(--gray-9);
      --color-text-link: var(--turq-med);
      --color-text-subtle: var(--gray-7);
      --color-code-comment: var(--green-light);
    }
  }

  *,
  :before,
  :after {
    box-sizing: border-box;
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji';
    max-height: 100%;
    line-height: 1.4;
  }
  button,
  input,
  select,
  textarea {
    font: inherit;
  }
  h1, h2, h3, h4, h5, h6, p, ol, ul {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  html,
  .Site {
    max-height: 100%;
    min-height: 100vh;
    scroll-padding-top: 4.6875rem;
  }
  a,
  a:link,
  a:visited {
    color: var(--color-text-link);
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
  .Site {
    display: flex;
    flex-direction: column;
    margin: 0;
  }
  @media print {
    /* display: flex makes the printer slice text lines in half */
    .Site { display: block; }
  }
  .bluebg {
    background: var(--color-background-banner);
  }
  .SiteContent {
    background: var(--color-background);
    flex: 1;
  }
  .Site-footer {
    border-top: var(--border);
    color: var(--white);
    font-size: 0.875rem;
  }
  .Site-header {
    background: var(--color-brand-primary);
    border-bottom: none;
    box-shadow: 0 0.0625rem 0.125rem rgba(171, 171, 171, 0.3);
    top: 0;
    width: 100%;
    z-index: 10;
  }
  .Header-nav {
    height: 56px;
    padding: 11px;
  }
  .Header-nav a {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
  }
  article {
    color: var(--color-text);
    margin: 0 auto 1.875rem;
    max-width: 75.75rem;
    padding: 0 1.5rem;
  }
  article h1,
  article h2,
  article h3,
  article h4,
  article h5,
  article h6 {
    color: var(--color-text);
  }
  article h1 {
    font-size: 2.25rem;
  }
  article h2 {
    font-size: 1.4rem;
  }
  article h3 {
    font-size: 1.125rem;
  }
  article h4,
  article h5,
  article h6 {
    font-size: 1rem;
  }
  article p,
  article ul,
  article ol {
    color: var(--color-text);
    font-size: 1rem;
    font-style: normal;
    font-weight: normal;
  }
  article ol article pre {
    background-color: var(--color-background-accented);
    border: var(--border);
    border-radius: 0.375rem;
    color: var(--color-text);
    font-size: 1rem;
    overflow-x: auto;
    padding: 1.5rem;
  }
  article pre,
  article code {
    color: var(--color-text);
    background: var(--color-background-accented);
    padding: 4px;
  }
  article pre {
    margin-left: 1.5rem;
  }