body,
html {
  margin: 0;
  padding: 0;
  overflow: hidden;
 }
*{
  font-family: cursive;
}
 .bgg{
  animation-name: bg;
  animation-duration: 15s;
  background-size: cover;
  animation-iteration-count: infinite;
  background-repeat: no-repeat;
  height:100vh;
  /* position: relative;
  z-index: -5; */
 }
@keyframes bg {
  0%{
    background-image: url(1.jpg);
    background-blend-mode: lighten;
    z-index: -5;
  }
  20%{
    background-image: url(6.jpg);
    background-blend-mode: lighten;
    z-index: -5;
  }
  40%{
    background-image: url(3.jpg);
    background-blend-mode: lighten;
    z-index: -5;
  }
  60%{
    background-image: url(4.jpg);
    background-blend-mode: lighten;
    z-index: -5;
  }
  80%{
    background-image: url(5.jpg);
    background-blend-mode: lighten;
    z-index: -5;
  }
  100%{
    background-image: url(1.jpg);
    background-blend-mode: lighten;
    z-index: -5;
  }
  
}

#fireworksCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}