.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background-color:#0000cc;
}

.ripple {
  position: fixed;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  z-index: 9998;
  animation: rippleAnim 1s ease-out forwards;
  border: 2px solid transparent;
  background: transparent;
  background-color: transparent;
  backdrop-filter: blur(40px) contrast(60) brightness(2.5) saturate(4);
  -webkit-backdrop-filter: blur(40px) contrast(60) brightness(2.5) saturate(4);
}

@keyframes rippleAnim {
  to {
    transform: translate(-50%, -50%) scale(6);
    opacity: 0;
  }
}