.cursor {
	position: fixed;
	pointer-events: none;

	width: 500px;
	height: 500px;
	border-radius: 50%;
	background-color: var(--color-accent);
	transform: translate(-50%, -50%);
	transition: transform 0.1s ease-out;
	z-index: -1;

	opacity: 60%;
}

.cursor.cursor:nth-of-type(1) {
	mix-blend-mode: hard-light;
	width: calc(100dvw - 3rem);
	height: calc(100dvw - 3rem);
	opacity: 0.2;
	background-color: var(--color-accent);
	filter: blur(2px);
}
.cursor:nth-of-type(2) {
	mix-blend-mode: hard-light;
	width: 600px;
	height: 600px;
	opacity: 0.35;
	background-color: var(--color-accent-shade);
	filter: blur(1px);
}
.cursor:nth-of-type(3) {
	mix-blend-mode: screen;
	width: 200px;
	height: 200px;
	background-color: var(--color-base);
}

/* Needed for the scrollbar! */
.scrollbar-thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 7px;
	height: 7px;
	z-index: 10;
	margin: 0px 10px;
	border-radius: 10px;
	user-select: none;
	touch-action: none;
	border: 2px solid var(--color-text-light);
	background-color: var(--color-base);
	transition:
		height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		width 0.1s ease-out,
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		background-color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* easeOutBack transition */
}

.scrollbar {
	padding-left: 8px;
}