.particle-container {
  position: absolute;
  top: -100%;
  left: 0;
  bottom: 0;
  width: 100%;
  --timescale: 0.5s;
}
.pt {
  display: block;
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  height: 50px;
  /*border:dotted thin gray;*/
  animation: moveUpDown calc(var(--timescale) * var(--yt)) infinite cubic-bezier(0.45, 0.05, 0.55, 0.95) alternate;
  animation-delay: calc(-1s * var(--d, 0));
}
.pt b {
  display: block;
  background: url(../images/blub.webp);
  background-size: contain;
  /* background: #FFF; */
  /* border-radius: 999px; */
  /*border:dotted thin green; */
  width: calc(0.1vw * var(--w));
  height: calc(0.1vw * var(--w));
  position: absolute;
  opacity: var(--o, 1);
  animation: moveRightLeft calc(var(--timescale) * var(--xt)) infinite cubic-bezier(0.45, 0.05, 0.55, 0.95) alternate,
    flicker calc(2s * var(--xd)) infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
  animation-delay: calc(-1s * var(--d, 0)), calc(-0.2s * var(--d, 0));
  filter: blur(1px);

  @media (max-width: 480px) {
    width: calc(.5vw * var(--w));
    height: calc(.5vw * var(--w));
  }
}
@keyframes moveUpDown {
  0% {
  }
  100% {
    transform: translateY(calc(50% * var(--yd, 3)));
  }
}
@keyframes moveRightLeft {
  0% {
    transform: translateX(calc(-50% * var(--xd, 3)));
  }
  100% {
    transform: translateX(calc(50% * var(--xd, 3)));
  }
}
@keyframes flicker {
  0% {
    opacity: calc(var(--o, 1) - 0.1);
  }
  100% {
    opacity: calc(var(--o, 1) + 0.1);
  }
}