.character {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  opacity: 0.4;
  background: radial-gradient(circle, #fff, #ffd6e0);
  animation: floaty 9s infinite ease-in-out;
}
.c1 { left: 8%; top: 20%; }
.c2 { right: 12%; top: 30%; animation-delay: 1s; }
.c3 { left: 45%; bottom: 10%; animation-delay: 2s; }

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-26px) rotate(8deg); }
}