:root {
  --sa-purple-warm: #704bd5;
  --sa-purple-cool: #615cce;
  --sa-blue-warm: #3a86be;
  --sa-blue-cool: #4f6fc7;
  --sa-teal: #1ca7b2;

  --h1-size: 54px;
  --h2-size: 36px;
  --h3-size: 28px;
  --h4-size: 22px;
  --h5-size: 16px;

  --li-size: 16px;

  --color-body-borders: #888;

  --color-light: #999999;
  --color-regular: #ffffff;
  --color-button-bg: var(--sa-teal);
  --color-button-fg: #000000;
  --color-button-hover: var(--sa-blue-warm);
  --color-border-slight: #333333;
  --color-fg: #fff;
  --color-bg: #121212;

  --color-link: var(--sa-teal);
  --color-link-visited: var(--sa-teal);
  --color-link-hover: var(--sa-blue-warm);

  --color-spin-burger: var(--sa-teal);

  --dropdown-font: 36px;

  --menu-popup-bg: var(--color-bg);
  --menu-popup-border: solid var(--color-light);
  --menu-popup-border-width: 1px;
  --menu-popup-padding: 1em;

  --menu-expanding-font-size: 18pt;
  --menu-expanding-bg: #222;
  --menu-expanding-padding: 0.5lh;
  --menu-expanding-indent: 1em;

  --sidebar-width: 100%;
  --sidebar-width-desktop: 20em;

  --footer-right-font-size-desktop: 24px;
  --footer-right-font-size-mobile: 36px;
}