.documentation>ul:first-of-type {
  position: fixed;
  padding: 1rem;
  list-style: none;
  padding: 0;
  width: 20%;
  top: 100px;
  right: 30px;
  height: calc(100% - 60px);
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom:80px; /**force scroll bar on large containers **/
  -webkit-overflow-scrolling: touch;
}

/* Turn on custom 8px wide scrollbar */
::-webkit-scrollbar {
  width: 10px; /* 1px wider than Lion. */
  height: 10px; /* 1px wider than Lion. */
  /* This is more usable for users trying to click it. */
  background-color: rgba(0,0,0,0);
  -webkit-border-radius: 100px;
}
/* hover effect for both scrollbar area, and scrollbar 'thumb' */
::-webkit-scrollbar:hover, ::-webkit-scrollbar-corner {
  background-color: rgba(0, 0, 0, 0.09);
}

/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
::-webkit-scrollbar-thumb {
  /* This is the EXACT color of Mac OS scrollbars. 
      Yes, I pulled out digital color meter */
  background: rgba(0,0,0,0.5);
  -webkit-border-radius: 100px;
  background-clip: padding-box;
  border: 2px solid rgba(0, 0, 0, 0);
  min-height: 10px; /*Prevent it from getting too small */
  min-width: 10px; /*Prevent it from getting too small */
}
::-webkit-scrollbar-thumb:active {
  background: rgba(0,0,0,0.61); /* Some darker color when you click it */
  -webkit-border-radius: 100px;
}