@media (hover: hover) {
  html, a {
    cursor: none !important;
  }
}

#cursor div {
  position: fixed;
  width: .5rem;
  height: .5rem;
  background: #fff;
  border-radius: 50%;
  mix-blend-mode: difference;
  overflow: hidden;
  z-index: 9;
  pointer-events: none;
  transition: .2s ease-in-out;
  transition-property: opacity, transform;
}
#cursor div:first-child {
  width: 2rem;
  height: 2rem;
  opacity: .2;
}
#cursor.hidden div {
  opacity: 0;
}
#cursor.hover div:first-child {
  opacity: 0;
}
#cursor.hover div:last-child {
  transform: scale(4);
}
#cursor.active div:first-child {
  opacity: 0;
  transform: scale(.25);
}