html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
}
body {
	display: flex;
	justify-content: center;
	align-items: center;
}
canvas {
	display: block;
	touch-action: none;
}
.custom-cursor {
  position: fixed;
  width: 80px; /* Adjust the size of the cursor */
  height: 80px; /* Adjust the size of the cursor */
  background-color: #ffdc00;
  border-radius: 50%;
  mix-blend-mode: difference; /* Provides the trail effect */
  pointer-events: none; /* Ensures the cursor does not interfere with other elements */
  transform: translate(-50%, -50%);
  transition: transform 0.1s;
  animation: trail 0.5s forwards;
}

@keyframes trail {
  100% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0.3; /* Adjust the opacity of the trail */
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 50; /* Adjust the opacity of the trail */
  }
}