<div class="container">
  <h1>Customize Scrollbar & Cursor pointer</h1>
</div>

<div class="cursor"></div>

body {
  background: #f7ece1;
  // cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"),
  //   auto;
  cursor: none;
  overflow-x: hidden;
}
.container {
  height: 200vh;

  h1 {
    text-align: center;
  }
}

$scrollbar-size: 15px;
$scrollbar-thumb: #cf5c36;
$scrollbar-track: #f7ece1;

::-webkit-scrollbar {
  width: $scrollbar-size;
  background: $scrollbar-track;
}

::-webkit-scrollbar-thumb {
  background: $scrollbar-thumb;
  border-radius: calc(15px / 2);

  &:hover {
    background: darken($scrollbar-thumb, 5%);
  }

  &:active {
    background: darken($scrollbar-thumb, 8%);
  }
}

.cursor {
  position: absolute; //so it is out of the flow
  width: 20px;
  height: 20px;
  background: white;
  mix-blend-mode: difference;
  border-radius: 50%;
  transform: translate(-50%, -50%); // so it is center with the cursor pointer
  transition: 200ms ease-out;
}

const cursor = document.querySelector(".cursor");

document.addEventListener("mousemove", customizeCursor);

function customizeCursor(e) {
  cursor.style.top = e.pageY + "px";
  cursor.style.left = e.pageX + "px";
}