Help with Custom Scrollbars For Landing Page

I’m losing my mind trying to get this to work. Googling and ChatGPT is not helping. Keep in mind I’m a bit of a beginner but I can understand the lingo.
So first off: My Site Repo

I wanted to add a custom scrollbar for my page, it’s just a single page with no sub-pages. So first I tried to add the scrollbar code to my default.html. It didn’t work. Now I tried adding it to my main css file @ /assets/css/main.min.css. It still didn’t work.

/* Customize scrollbar track color */
::-webkit-scrollbar-track {
	background: hsla(0, 0%, 98%, .13); /* Change to desired background color */

/* Customize scrollbar thumb color */
::-webkit-scrollbar-thumb {
	background: #c4a489; /* Change to desired thumb color */
	border-radius: 10px; /* Adjust to make the edges rounded */

	/* Customize scrollbar thumb on hover */
	::-webkit-scrollbar-thumb:hover {
		background: #e4a909; /* Change to desired hover color */

/* Hide scrollbar when not in use */
.content::-webkit-scrollbar {
	width: 8px; /* Adjust width of the scrollbar */
	opacity: 0; /* Hide scrollbar initially */
	transition: opacity 0.5s; /* Add transition for smooth appearance */

/* Show scrollbar on hover */
.content:hover::-webkit-scrollbar {
	opacity: 1; /* Show scrollbar on hover */

/* Add custom scrollbar animation */
@keyframes custom-scrollbar-pulse {
	0%, 100% {
		opacity: 1;

	50% {
		opacity: 0;

/* Apply animation to scrollbar thumb */
::-webkit-scrollbar-thumb {
	animation: custom-scrollbar-pulse 1.5s infinite; /* Adjust animation duration as needed */

My limited brain power can’t understand where I’m going wrong. Can anybody help me please?

EDIT: I somehow got it to work on commit 19, but I used different codes for the css file and the html file just for the sake of it. It wasn’t doing everything though (like the pulse thing) so I tried removing the one from the html file. It’s stopped working again. On commit 22 I just tried to put both codes on the css and html files and it still hasn’t worked. WTF man.