<!-- simplest way to customise a scrollbar -->

<!-- random text -->
<h1>hi</h1><h1>hey</h1><h1>be</h1><h1>kind</h1><h1>to</h1><h1>people</h1><h1>around</h1><h1>you</h1>
<h1>human</h1>
<h1>nature</h1>

body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1{
  font-size: 200px;
}
::-webkit-scrollbar{
  width: 1.5em;
}

::-webkit-scrollbar-track{
  background: hsl(190, 37%, 75%);
  border-radius: 100vw;
  margin-block: 0.5em;
}

::-webkit-scrollbar-thumb{
  background: hsl(220, 75%, 60%);
  border-radius: 100vw;
  border: 0.15em solid hsl(190, 37%, 75%);
}

/* change all values and see what happens for yourself */