html, body {
  margin: 0;
  padding: 0;
  background:black;
}
canvas {
  display: block;
  height:100vh;
  width:100vw;
}

.filter {
  position:fixed;
  width: 100%;
  height:100%;
  background-color: #000000;
  mix-blend-mode: difference;
}

.gradients {
  position:fixed;
  width: 100%;
  height:100%;
  mix-blend-mode: difference;
  animation: fade infinite ease-in-out 20s;
}

.g {
  background: radial-gradient(#570000, #03300d, #000000 70%);
  position:absolute;
  border-radius: 50%;
  top: 50%;
  left:50%;
  transform:translate(-50%,-50%);
  height:30vw;
  width:30vw;
  animation: fade-out infinite  2.5s ease-out;
  transition: height  2.5s ease, width 2.5s ease;
  mix-blend-mode:screen;
}

.g2 {
  animation-delay: 0.888s;
}
.g3 {
  animation-delay: 1.6s;
}

@keyframes fade-out {
  0% {
    opacity:1;
  }

  80% {
    opacity:0;
  }
  
}


@keyframes fade {
  0% {
    opacity:0.2;
  }

  60% {
    opacity:0.4;
  }

  100% {
    opacity:0.3;
  }
  
}