body,
html {
  margin: 0px;
  padding: 0px;
  position: fixed;
  background-image: url('../images/trees6.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

img {
  -webkit-filter: brightness(25%);
  filter: brightness(25%);
}

canvas {
  -webkit-filter: blur(2px);
  filter: blur(2px);
  -webkit-filter: drop-shadow(3px 3px 3px rgba(114, 6, 238, 0.9));
  filter: drop-shadow(10px 10px 10px rgba(116, 65, 236, 0.5));
  z-index: 100;
  -webkit-animation: elastic 2s ease 0s 1 normal;
  -moz-animation: elastic 2s ease 0s 1 normal;
  -ms-animation: elastic 2s ease 0s 1 normal;
  animation: elastic 2s ease 0s 1 normal;
}
canvas[resize] {
  width: 100%;
  height: 100%;
}

.firefly{
  /* filter: grayscale(1%) invert(10%);
  -webkit-filter: grayscale(1%) invert(10%); */
  width: 100%;
  height: 100%;
  border-radius:60%;
  -webkit-animation: glowing 2s ease-in-out infinite alternate;
  -moz-animation: glowing 2s ease-in-out infinite alternate;
  animation: glowing 1s ease-in-out infinite alternate;
}



/* 
Animation Effects  and Structure
animation: <NAME-OF-ANIMTION> <TOTAL-TIME> <TIMING> <START-DELAY> <REPEAT> <DIRECTION> 
*/
@keyframes glowing {
  from {
    box-shadow: 0 0 10px #fff, 0 0 20px #1eb101, 0 0 30px #a94dff, 0 0 40px #01aa09, 0 0 50px #1eb101, 0 0 60px #d1b203, 0 0 70px #a94dff;
  }
  to {
    box-shadow: 0 0 20px #fff, 0 0 30px #1eb101, 0 0 40px #a94dff, 0 0 50px #01aa09, 0 0 60px #1eb101, 0 0 70px #d1b203, 0 0 80px #a94dff;
  }
}
@keyframes elastic {
  0% {
    -webkit-transform: scale(2);
    transform: scale(1);
  }

  30% {
    -webkit-transform: scaleX(1.25) scaleY(0.75);
    transform: scaleX(1.25) scaleY(0.75);
  }

  40% {
    -webkit-transform: scaleX(0.75) scaleY(1.25);
    transform: scaleX(0.75) scaleY(1.25);
  }

  60% {
    -webkit-transform: scaleX(1.15) scaleY(0.85);
    transform: scaleX(1.15) scaleY(0.85);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes elastic {
  0% {
    -ms-transform: scale(1);
    transform: scale(1);
  }

  30% {
    -ms-transform: scaleX(1.25) scaleY(0.75);
    transform: scaleX(1.25) scaleY(0.75);
  }

  40% {
    -ms-transform: scaleX(0.75) scaleY(1.25);
    transform: scaleX(0.75) scaleY(1.25);
  }

  60% {
    -ms-transform: scaleX(1.15) scaleY(0.85);
    transform: scaleX(1.15) scaleY(0.85);
  }

  100% {
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}