:root {
  --p1: 140,255,210;
  --p2: 100,255,200;
  --p3: 60,255,170;
  --glow: 100,255,200;
}

.plankton-field {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
	pointer-events: none;
	overflow: hidden;
	z-index: 2;       
}

.plankton{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:5;

      -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0) 100%);
              mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0) 100%);

      background-image:
        radial-gradient(circle, rgba(var(--p1), .65) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(var(--p2), .45) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(var(--p3), .25) 0 1px, transparent 1.5px);
      background-size: 180px 300px, 260px 420px, 340px 560px;
      background-position: 23px 57px, 113px 19px, 177px 88px;

      filter: blur(.35px) drop-shadow(0 0 6px rgba(var(--glow), .35));
      animation: floatA 95s linear infinite;
      opacity:.92;
    }

    .plankton.layer-back{
      z-index:4;
      background-image:
        radial-gradient(circle, rgba(var(--p1), .35) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(var(--p2), .25) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(var(--p3), .15) 0 1px, transparent 1.5px);
      background-size: 240px 420px, 340px 560px, 440px 720px;
      background-position: 67px 34px, 154px 99px, 211px 63px;
      filter: blur(.7px) drop-shadow(0 0 8px rgba(var(--glow), .32));
      animation-duration:130s;
      opacity:.8;
    }

    @keyframes floatA{
      0%   { background-position: 23px 57px, 113px 19px, 177px 88px;   transform: translateX(0); }
      100% { background-position: 83px -3000px, 53px -4200px, 237px -5400px; transform: translateX(9px); }
    }
    @keyframes floatB{
      0%   { background-position: 12px 43px, 141px 77px, 199px 25px;   transform: translateX(0); }
      100% { background-position: -18px -3200px, 81px -3600px, 159px -5000px; transform: translateX(-11px); }
    }
    @keyframes floatC{
      0%   { background-position: 40px 12px, 90px 66px, 150px 90px;    transform: translateX(0); }
      100% { background-position: 10px -3400px, 130px -4000px, 60px -5200px; transform: translateX(7px); }
    }

    /* vary the layers */
    .plankton:nth-of-type(2){ animation: floatB 120s linear infinite; background-position: 5px 80px, 95px 10px, 170px 40px; }
    .plankton:nth-of-type(3){ animation: floatC 100s linear infinite; background-position: 55px 30px, 135px 60px, 205px 20px; animation-delay:-18s; }
    .plankton:nth-of-type(4){ animation: floatB 140s linear infinite reverse; background-size:200px 320px, 280px 460px, 360px 580px; }
    .plankton:nth-of-type(5){ animation: floatA 150s linear infinite alternate; background-position: 15px 50px, 120px 80px, 210px 30px; animation-delay:-35s; }
    .plankton:nth-of-type(6){ animation: floatC 160s linear infinite; background-size:220px 340px, 320px 500px, 420px 680px; animation-delay:-50s; }

    .layer-back:nth-of-type(7){ animation: floatC 180s linear infinite; }
    .layer-back:nth-of-type(8){ animation: floatB 220s linear infinite; animation-delay:-60s; }
    .layer-back:nth-of-type(9){ animation: floatA 200s linear infinite reverse; }