:root {
  --white: #ffffff;
  --off-white: #fafaf8;
  --bluegrey1: #e9eef0;
  --bluegrey2: #c9d1d4;
  --bluegrey3: #b9c2c6;
  --bluegrey4: #8595a3;
  --bluegrey5: #444e57;
}

html {
  scrollbar-face-color: var(--off-white);
  scrollbar-base-color: var(--off-white);
  scrollbar-3dlight-color: var(--off-white);
  scrollbar-highlight-color: var(--off-white);
  scrollbar-track-color: var(--bluegrey2);
  scrollbar-arrow-color: var(--bluegrey2);
  scrollbar-shadow-color: var(--off-white);
  scrollbar-darkshadow-color: var(--off-white);
}

::-webkit-scrollbar { width: 20px; height: 20px;}
::-webkit-scrollbar-button { width: 0px; height: 0px;}
::-webkit-scrollbar-track {  background-color: var(--off-white);}
::-webkit-scrollbar-track-piece { background-color: var(--bluegrey2);}
::-webkit-scrollbar-thumb {
    height: 20px;
    background-color: var(--bluegrey4);
    border-radius: 10px;
    border: 2px solid var(--off-white);  /* creates padding around scroll thumb */
    }
::-webkit-scrollbar-corner { background-color: var(--off-white);}