.bubble {
  position: fixed;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgb(255, 0, 0);
  border: 2px solid rgb(255, 0, 0);
  pointer-events: none; /* Allows clicks to pass through */
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
  filter: blur(1px);
  mix-blend-mode: overlay;
  display: none; /* Hidden by default */
}

/* Show bubble only on devices with mouse (not touch) */
@media (hover: hover) {
  .bubble {
    display: block;
  }
}

/* Bubble size changes when hovering clickable elements */
a,
button,
[role="button"],
[onclick] {
  &:hover ~ .bubble,
  & ~ .bubble:hover {
    width: 60px;
    height: 60px;
    background-color: rgb(255, 0, 0);
  }
}