#no-cursor {
  cursor:none;
}
#cursor {
    position: absolute;
  width: 40px;
  height:40px;
left:50%;
right:50%;
top:0;
bottom:0;
  background-image: url("../assets/img/moon_cursor1.gif");
  background-size: cover;
  border-radius: 50%;
  /*background: var(--purple);*/
  pointer-events: none;
  
  mix-blend-mode: plus-lighter;
  z-index:7;

  /*animation: rotateShape 10s infinite linear;*/
  transition: width .5s, height .5s;
  box-shadow: 
    0px 0px 10px blue, 
    0px 0px 20px blue, 
    0px 0px 25px white, 
    0px 0px 25px white; 
   
}
/*@keyframes rotateShape {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}*/
#cursor span {


  position: absolute;
 
  background-image: url("../assets/img/cresent.moon.gif");
  background-size: cover;
  width: 5px;
  height:5px;
  border-radius: 50%;
  /*background: #fff;*/
  opacity: 0;

 
}
#cursor.hovered span {
  animation: animateBlob 1.7s infinite;
}
#cursor span:first-child {
  top: -5px;
  left: -5px;
  animation-delay: .1s;
}
#cursor span:nth-child(2) {
  top: 20px;
  left: -15px;
  animation-delay: .3s;
}
#cursor span:nth-child(3) {
  top: 5px;
  left: 40px;
  animation-delay: .5s;
}
#cursor span:last-child {
  right: -5px;
  bottom: -5px;
  animation-delay: .7s;
}

@keyframes animateBlob {
  0% {
    opacity: 1;
  }
  40% {
    transform: scale(10);
    opacity: 0.7;
  }
  100% {
    opacity: 0.7;
  }
}