* {
	cursor: none !important;
	/* background-color: rgba(255, 0, 0, 0.067) !important; */

	padding: 0;
	margin: 0;
	box-sizing: border-box;
	user-select: none;
}

body {
	&::-webkit-scrollbar,
	&::-webkit-scrollbar-thumb {
		display: none;
	}
	/*
	&::selection {
		background-color: #ccff00;
        color: black;
	} */
}

.grid-background {
	background-size: 50px 50px;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	mask-image: radial-gradient(800px circle at var(--cursor-x) var(--cursor-y), black, transparent);
	-webkit-mask-image: radial-gradient(800px circle at var(--cursor-x) var(--cursor-y), black, transparent);
}

#cursor {
	position: fixed;
	width: 24px;
	height: 24px;
	background-color: #ccff00;
	border-radius: 50%;
	pointer-events: none;
	z-index: 9999;
	transform: translate(-50%, -50%);
	mix-blend-mode: difference;
	transition: width 0.3s ease-in-out, height 0.3s ease-in-out;

	&.active {
		width: 48px;
		height: 48px;
		background-color: transparent;
		border: 2px solid #ccff00;
	}
}

#spotlight {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 1;
	background: radial-gradient(600px circle at var(--cursor-x) var(--cursor-y), rgba(255, 255, 255, 0.06), transparent 40%);
}

#noise {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 50;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.scroll-content {
	animation: scroll 20s linear infinite;
}

@keyframes scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}