html,
body,
button,
a,
input,
textarea,
select {
  cursor: url("./myspace-purple-cursor.svg") 2 1, auto;
}

.cursor-glitter {
  position: fixed;
  z-index: 2147483647;
  --sparkle-size: 9px;
  width: var(--sparkle-size);
  height: var(--sparkle-size);
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(45deg);
  animation: cursor-glitter-pop 560ms ease-out forwards;
  will-change: opacity, transform;
}

.cursor-glitter::before,
.cursor-glitter::after {
  content: "";
  position: absolute;
  background: var(--glitter-color, #ff4fd8);
  box-shadow: 0 0 5px var(--glitter-color, #ff4fd8);
}

.cursor-glitter::before {
  left: calc(var(--sparkle-size) / 2 - 0.5px);
  top: 0;
  width: 1px;
  height: var(--sparkle-size);
}

.cursor-glitter::after {
  left: 0;
  top: calc(var(--sparkle-size) / 2 - 0.5px);
  width: var(--sparkle-size);
  height: 1px;
}

@keyframes cursor-glitter-pop {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(45deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -82%) scale(0.25) rotate(135deg);
  }
}