.cursor{
  width:30px;
  height: 30px;
  background: hsl(187, 100%, 80%);
  border-radius: 50%;
  opacity: 0;
  mix-blend-mode: lighten;
  box-shadow: 0 0 10px hsl(220, 100%, 70%), 0 0 15px hsl(220, 100%, 70%);
  position: absolute;
  z-index: 1000;
  pointer-events: none;
  }
  
.expand{
  animation: cursorClick .5s forwards;
  width:30px;
  height: 30px;
  background: hsl(187, 100%, 80%);
  opacity: 1;
  border: 2px solid hsl(187, 100%, 90%);;
  box-shadow: 0 0 10px hsl(220, 100%, 70%), 0 0 15px hsl(220, 100%, 70%);
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}
@keyframes cursorClick{
  0%{
      transform: scale(1);
      opacity: 1
    }
  25%{
      transform: scale(1.5);
      box-shadow: 0 0 5px hsl(220, 100%, 100%), 0 0 15px hsl(220, 100%, 70%);
    }
  100%{
      transform: scale(2);
      opacity: 0;
    }
}

.tris{
  opacity: 0;
  width: 30px;
  height: 30px;
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}
.trisclick{
  animation: triangles .5s forwards;
  width: 30px;
  height: 30px;
  position: absolute;
  opacity: 1;
  z-index: 1000;
  pointer-events: none;
}
@keyframes triangles{
  0%{
      transform: scale(1);
      opacity: 1
    }
  25%{
      transform: scale(1.5);
    }
  50%{
      opacity: 0.25;
    }
  75%{
      opacity: 0.5;
    }
  100%{
      transform: scale(2);
      opacity: 0;
    }
}

#trailCanvas{
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1000;
}