div.fluid-1 {
  background: #fff;
  width: 25vw;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 61% 39% 16% 84% / 57% 72% 28% 43%;
  animation: fluid-1-anim 20s infinite;
  position: absolute;
  /* z-index: -1; */
  bottom: 6vw;
  left: 10vw;
}

@media screen and (max-width: 1024px) {
  div.fluid-1 {
    width: 60vw;
    left: -10vw;
    bottom: -2vw;
  }
}

@keyframes fluid-1-anim {
    0%    { border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%; }
    12.5% { border-radius: 60% 75% 40% 80% / 70% 70% 60% 65%; }
    25%   { border-radius: 55% 95% 65% 90% / 75% 65% 85% 70%; }
    37.5% { border-radius: 60% 40% 50% 45% / 60% 40% 60% 40%; }
    50%   { border-radius: 55% 95% 65% 90% / 75% 65% 85% 70%; }
    62.5% { border-radius: 60% 40% 50% 45% / 60% 40% 60% 40%; }
    75%   { border-radius: 60% 75% 40% 80% / 70% 70% 60% 65%; }
    87.5% { border-radius: 40% 60% 55% 45% / 50% 60% 40% 50%; }
    100%  { border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%; }
}

div.fluid-2 {
  background: #F7E3DA;
  width: 17vw;
  height: 15vw;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 102% 80% 120% 64% / 160% 112% 98% 33%;
  animation: fluid-2-anim 10s infinite;
  position: absolute;
  z-index: -1;
  top: 16vw;
  right: 8vw;
}

@keyframes fluid-2-anim {
    0%    { border-radius: 102% 80% 120% 64% / 160% 112% 98% 33%; transform: rotate(0deg);}
    50%   { border-radius: 132% 150% 230% 84% / 240% 182% 168% 73%; transform: rotate(45deg);}
    100%   { border-radius: 102% 80% 120% 64% / 160% 112% 98% 33%; transform: rotate(0deg);}
}

div.fluid-3 {
  background: #F7E3DA;
  width: 20vw;
  height: 20vw;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 102% 80% 120% 64% / 160% 112% 98% 33%;
  animation: fluid-3-anim 10s infinite;
  position: absolute;
  z-index: -1;
  bottom: 10vw;
  left: -5vw;
}

@media screen and (max-width: 1599px) {
  div.fluid-3 {
    left: 2vw
  }
}

@keyframes fluid-3-anim {
    0%    { border-radius: 102% 80% 120% 64% / 160% 112% 98% 33%; transform: rotate(45deg);}
    50%   { border-radius: 132% 150% 230% 84% / 240% 182% 168% 73%; transform: rotate(75deg);}
    100%   { border-radius: 102% 80% 120% 64% / 160% 112% 98% 33%; transform: rotate(45deg);}
}

div.fluid-4 {
  background: #fff;
  width: 9vw;
  height: 7vw;
  margin: 0 auto;
  border-radius: 102% 80% 120% 64% / 160% 112% 98% 33%;
  animation: fluid-3-anim 10s infinite;
  position: absolute;
  transform: rotate(-105deg);
  left: 12vw;
  bottom: 2vw;
  z-index: 0;
}

@keyframes fluid-3-anim {
    0%    { border-radius: 102% 80% 120% 64% / 160% 112% 98% 33%;}
    25%   { border-radius: 152% 170% 230% 84% / 240% 182% 168% 73%;}
    50%   { border-radius: 102% 80% 120% 64% / 160% 112% 98% 33%;}
    75%   { border-radius: 152% 170% 230% 84% / 240% 182% 168% 73%;}
    100%   { border-radius: 102% 80% 120% 64% / 160% 112% 98% 33%;}
}