Style scrollbars for Webkit browsers

[FireIsGood]

Adds scrollbar colors and styles them to match the site a little better.

Currently, the scrollbars do not match the theme on webkit based browsers (chrome, edge, etc.). This does not affect browsers which do not use webkit (e.g. firefox) as they handle scrollbars differently. This pull request adds styles to them for users with a pointer and just corrects the color-scheme for everyone else.

The changes are made through Tailwind via the @apply property, so no magic numbers.

Before:

Dark	Light

After:

Dark	Light

Concerns

This change modifies the size of the scrollbar which could possibly be an accessibility concern. It is possible to remove the extra styles and just keep the color-scheme if that is the case.

When customizing scrollbars, ensure that the thumb and track have enough contrast with the surrounding background. Also ensure that the scrollbar hit area is large enough for people who use touch input. –MDN

Another concern is the use of .dark to hook into dark mode. The current tailwind settings set the dark mode to be set with a class, but this could theoretically be changed, leading to this breaking. This specific scenario is unlikely as the 'media' option also breaks the theme switcher, but it is technically one possible issue.

Possible Other Solutions

This change works on the scrollbars by styling them directly. It is also possible to just use the color-scheme property on the HTML element when there is the .dark class. This would address the issue of the changed size.

I have separated the dark mode scrollbar colors and the styled scrollbars into separate commits, so feel free to revert the style scrollbars commit if this seems to be the better solution.

Here is what that would result in: