body {
  overflow: hidden;
}

.scene {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.glowy-blob {
  position: relative;
  font-size: 20vmin;
  width: 1em;
  height: 1em;
  animation: huerot 10s infinite;
  filter: url("#goo");
}
.glowy-blob div {
  position: absolute;
  background: currentColor;
  border-radius: 50%;
  transform: translate(50%, 50%);
}
.glowy-blob div:nth-child(1) {
  width: 1.9em;
  height: 1.9em;
  top: 0;
  left: 0;
  animation: anim-1 5s ease-in-out infinite;
}
@keyframes anim-1 {
  from, to {
    left: 31px;
    top: 64px;
  }
  50% {
    left: -4px;
    top: -39px;
  }
}
.glowy-blob div:nth-child(2) {
  width: 0.9em;
  height: 0.9em;
  top: 0;
  left: 0;
  animation: anim-2 5s ease-in-out infinite;
}
@keyframes anim-2 {
  from, to {
    left: 14px;
    top: -17px;
  }
  50% {
    left: -5px;
    top: 6px;
  }
}
.glowy-blob div:nth-child(3) {
  width: 0.9em;
  height: 0.9em;
  top: 0;
  left: 0;
  animation: anim-3 5s ease-in-out infinite;
}
@keyframes anim-3 {
  from, to {
    left: -6px;
    top: 29px;
  }
  50% {
    left: -26px;
    top: -62px;
  }
}
.glowy-blob div:nth-child(4) {
  width: 0.9em;
  height: 0.9em;
  top: 0;
  left: 0;
  animation: anim-4 5s ease-in-out infinite;
}
@keyframes anim-4 {
  from, to {
    left: 96px;
    top: -79px;
  }
  50% {
    left: -24px;
    top: 65px;
  }
}
.glowy-blob div:nth-child(5) {
  width: 0.9em;
  height: 0.9em;
  top: 0;
  left: 0;
  animation: anim-5 5s ease-in-out infinite;
}
@keyframes anim-5 {
  from, to {
    left: 17px;
    top: 18px;
  }
  50% {
    left: -20px;
    top: 58px;
  }
}
.glowy-blob div:nth-child(6) {
  width: 0.9em;
  height: 0.9em;
  top: 0;
  left: 0;
  animation: anim-6 5s ease-in-out infinite;
}
@keyframes anim-6 {
  from, to {
    left: 98px;
    top: -15px;
  }
  50% {
    left: 98px;
    top: -82px;
  }
}
.glowy-blob div:nth-child(7) {
  width: 0.9em;
  height: 0.9em;
  top: 0;
  left: 0;
  animation: anim-7 5s ease-in-out infinite;
}
@keyframes anim-7 {
  from, to {
    left: -38px;
    top: -52px;
  }
  50% {
    left: 92px;
    top: -3px;
  }
}
.glowy-blob div:nth-child(8) {
  width: 1.9em;
  height: 1.9em;
  top: 0;
  left: 0;
  animation: anim-8 5s ease-in-out infinite;
}
@keyframes anim-8 {
  from, to {
    left: 80px;
    top: 36px;
  }
  50% {
    left: -67px;
    top: -30px;
  }
}
.glowy-blob div:nth-child(9) {
  width: 0.9em;
  height: 0.9em;
  top: 0;
  left: 0;
  animation: anim-9 5s ease-in-out infinite;
}
@keyframes anim-9 {
  from, to {
    left: -60px;
    top: 7px;
  }
  50% {
    left: 0px;
    top: 48px;
  }
}
.glowy-blob div:nth-child(10) {
  width: 0.9em;
  height: 0.9em;
  top: 0;
  left: 0;
  animation: anim-10 5s ease-in-out infinite;
}
@keyframes anim-10 {
  from, to {
    left: -39px;
    top: -96px;
  }
  50% {
    left: -15px;
    top: 73px;
  }
}
.glowy-blob div:nth-child(11) {
  width: 0.9em;
  height: 0.9em;
  top: 0;
  left: 0;
  animation: anim-11 5s ease-in-out infinite;
}
@keyframes anim-11 {
  from, to {
    left: -78px;
    top: 80px;
  }
  50% {
    left: -54px;
    top: 49px;
  }
}
.glowy-blob div:nth-child(12) {
  width: 0.9em;
  height: 0.9em;
  top: 0;
  left: 0;
  animation: anim-12 5s ease-in-out infinite;
}
@keyframes anim-12 {
  from, to {
    left: -75px;
    top: -60px;
  }
  50% {
    left: -61px;
    top: 75px;
  }
}
.glowy-blob div:nth-child(13) {
  width: 0.9em;
  height: 0.9em;
  top: 0;
  left: 0;
  animation: anim-13 5s ease-in-out infinite;
}
@keyframes anim-13 {
  from, to {
    left: -22px;
    top: -82px;
  }
  50% {
    left: -26px;
    top: -71px;
  }
}
.glowy-blob div:nth-child(14) {
  width: 0.9em;
  height: 0.9em;
  top: 0;
  left: 0;
  animation: anim-14 5s ease-in-out infinite;
}
@keyframes anim-14 {
  from, to {
    left: -57px;
    top: 33px;
  }
  50% {
    left: -54px;
    top: -58px;
  }
}
.glowy-blob div:nth-child(15) {
  width: 0.9em;
  height: 0.9em;
  top: 0;
  left: 0;
  animation: anim-15 5s ease-in-out infinite;
}
@keyframes anim-15 {
  from, to {
    left: 54px;
    top: -13px;
  }
  50% {
    left: 100px;
    top: 48px;
  }
}
.glowy-blob div:nth-child(16) {
  width: 0.9em;
  height: 0.9em;
  top: 0;
  left: 0;
  animation: anim-16 5s ease-in-out infinite;
}
@keyframes anim-16 {
  from, to {
    left: -5px;
    top: -4px;
  }
  50% {
    left: -100px;
    top: 99px;
  }
}
.glowy-blob div:nth-child(17) {
  width: 0.9em;
  height: 0.9em;
  top: 0;
  left: 0;
  animation: anim-17 5s ease-in-out infinite;
}
@keyframes anim-17 {
  from, to {
    left: 31px;
    top: 40px;
  }
  50% {
    left: 86px;
    top: -15px;
  }
}
.glowy-blob div:nth-child(18) {
  width: 0.9em;
  height: 0.9em;
  top: 0;
  left: 0;
  animation: anim-18 5s ease-in-out infinite;
}
@keyframes anim-18 {
  from, to {
    left: 60px;
    top: 72px;
  }
  50% {
    left: -49px;
    top: 42px;
  }
}
.glowy-blob div:nth-child(19) {
  width: 0.9em;
  height: 0.9em;
  top: 0;
  left: 0;
  animation: anim-19 5s ease-in-out infinite;
}
@keyframes anim-19 {
  from, to {
    left: -32px;
    top: -68px;
  }
  50% {
    left: -21px;
    top: 82px;
  }
}
.glowy-blob div:nth-child(20) {
  width: 0.9em;
  height: 0.9em;
  top: 0;
  left: 0;
  animation: anim-20 5s ease-in-out infinite;
}
@keyframes anim-20 {
  from, to {
    left: -80px;
    top: 22px;
  }
  50% {
    left: 85px;
    top: -5px;
  }
}
.glowy-blob div:nth-child(21) {
  width: 0.9em;
  height: 0.9em;
  top: 0;
  left: 0;
  animation: anim-21 5s ease-in-out infinite;
}
@keyframes anim-21 {
  from, to {
    left: 100px;
    top: -91px;
  }
  50% {
    left: 68px;
    top: 46px;
  }
}
@keyframes huerot {
  0% {
    color: #fd5;
  }
  45% {
    color: #fd5;
  }
  50% {
    color: mediumspringgreen;
  }
  95% {
    color: mediumspringgreen;
  }
  to {
    color: #fd5;
  }
}
@keyframes bounceback {
  100% {
    left: 0;
    top: 0;
  }
}