canvas {
  width: 100%;
  /* height: 100%; */
  height: 100%;
}

body {
  /*
  width: 100%;
  height: 100%;
  background-color: #222;
  background-image: url("storm_fs.jpg");
  background-size: cover;
  background-position: 0 0;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
  */
  z-index: 888;
}
body:after {
  /*content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.1);
  */
  z-index: 999;
  -webkit-animation: thunder-bg 6s infinite;
          animation: thunder-bg 6s infinite;
}

canvas {
  display: block;
  /* position: absolute; */
  position: fixed !important;
  /* top: 0px; */
  top: 0px;
  left: 0;
  z-index: 5;
  pointer-events: none;
	
  filter: blur(0px);

}

#canvas3 {
  z-index: 5;
}

#canvas2 {
  z-index: 10;
}

#canvas1 {
  z-index: 100;
}

@-webkit-keyframes thunder-bg {
  0% {
    background-color: rgba(34, 34, 34, 0.9);
  }
  9% {
    background-color: rgba(34, 34, 34, 0.9);
  }
  10% {
    background-color: rgba(59, 59, 59, 0.3);
  }
  10.5% {
    background-color: rgba(34, 34, 34, 0.9);
  }
  80% {
    background-color: rgba(34, 34, 34, 0.9);
  }
  82% {
    background-color: rgba(59, 59, 59, 0.3);
  }
  83% {
    background-color: rgba(34, 34, 34, 0.9);
  }
  83.5% {
    background-color: rgba(59, 59, 59, 0.3);
  }
  100% {
    background-color: rgba(34, 34, 34, 0.9);
  }
}