:root {
  --lava-core-hue: 200;
  --lava-saturation: 100%;
  --lava-base-lightness: 70;
  --lava-blob-brightness: 40%;
}

.lava-wrapper {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);

  width: min(800px, 92vmin);
  height: min(800px, 92vmin);
  opacity: .7;
  pointer-events: none;
  z-index: 0;
}

.lava-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  border-radius: 50%;
  background: transparent;
  mix-blend-mode: screen;
}


.lava-layer.core {
  z-index: 0;
  /* filter: blur(5px) brightness(1.1); */
}

.lava-layer.rings {
  filter: blur(2px) brightness(0.8);
}

.lava-layer.glow {
  z-index: 1;
  filter: blur(8px) brightness(1.3);
}

.lava-layer.blur {
  z-index: 2;
  /* filter: blur(6px) brightness(1.2) contrast(1.1); */
}

.lava-layer.sharp {
  z-index: 3;
  filter: blur(6px) brightness(1.2) contrast(1.1);
}