:root {
  --bg-left: hsl(202, 74%, 30%);
  --bg-main: hsl(202, 72%, 41%);

  --tree-bg-2: hsl(202, 59%, 47%);
  --tree-bg-2-lighter: hsl(202, 50%, 56%);
  --tree-fg-2: hsl(202, 0%, 30%);

  --tree-bg-1: hsl(202, 48%, 60%);
  --tree-bg-1-lighter: hsl(202, 43%, 67%);

  --active-bg: hsl(202, 100%, 100%);

  --selection-color: hsl(86, 54%, 51%);

  --emphasis-color: hsl(36, 100%, 50%);

  /* --edit-bg is not defined here,
     so that we can fallback to
     "handmadepaper.png" background
     image.
   */
  --edit-text-color: hsl(27,28%,22%);
  --edit-text-shadow: -1px -1px 0px rgba(0,0,0,0.1), 1px 1px 0px rgba(255,255,255,0.8);
  --normal-text-color: hsl(0, 20%, 17%);
  --normal-text-color-medium: #333;
  --body-font: "Open Sans";
  --header-font: "Bitter";

  --background-sidebar: hsl(200, 15%, 90%);
  --background-sidebar-menu: hsl(200, 13%, 95%);

  --small-shadow: 1px 1px 3px rgba(0,0,0,0.4);
  --translucent-emphasis-1: hsla(0,100%,100%, 0.4);
  --translucent-emphasis-2: hsla(0,100%,100%, 0.1);

  --ui-1-fg: #334;
  --ui-1-bg: white;

  --ui-2-fg: black;
  --ui-2-bg: hsl(202, 34%, 96%);
  --ui-2-border-color: hsl(212deg 5% 58%);

  --ui-3-fg: #334;
  --ui-3-bg: rgb(217,217,217);
  --ui-3-border-color: #c8d3d8;

  --ui-4-fg: hsl(212deg 4% 30%);

  --fullscreen-card-borders: #dedede;
  --fullscreen-inactive-text-color: hsl(27,11%,75%);

  --card-btn-color: hsl(0,0%,20%);

  --scrollbar-bg-color: #ddd;
  --scrollbar-thumb-color: #61808e;
  --scrollbar-shadow-color: #312c2c;
  --scrollbar-thumb-border-top: #8499a2;
  --scrollbar-thumb-border-bottom: #566e78;
}