body {
  cursor: none;
}

@media screen and (max-width: 1200px) {
  body {
    cursor: auto;
  }
}

.cursor,
.cursor2,
.cursor3 {
  position: fixed;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  pointer-events: none;
  left: -100px;
  top: 50%;
  mix-blend-mode: difference;
  transition: all 300ms linear;
  z-index: 99999;
}

.cursor {
  background-color: rgba(59, 130, 246, 0.5);
  height: 0;
  width: 0;
}

.cursor2,
.cursor3 {
  height: 36px;
  width: 36px;
  z-index: 99998;
  transition: all 0.3s ease-out;
}

.cursor2.hover,
.cursor3.hover {
  transform: scale(2) translateX(-25%) translateY(-25%);
  border: none;
}

.cursor2 {
  border: 2px solid rgba(59, 130, 246, 0.8);
  box-shadow: 0 0 22px rgba(59, 130, 246, 0.6);
}

.cursor2.hover {
  background: rgba(59, 130, 246, 0.3);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
}

.cursor3 {
  border: 1px solid rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}

.cursor3.hover {
  background: rgba(139, 92, 246, 0.2);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
}

@media screen and (max-width: 1200px) {
  .cursor,
  .cursor2,
  .cursor3 {
    display: none;
  }
}