.bubble-full {
  position: absolute;
  border-radius: 9999px;
  opacity: 0.5;
  animation: floatAround ease-in-out infinite;
}

.bubble-small { width: 10px; height: 10px; }
.bubble-medium { width: 20px; height: 20px; }
.bubble-large { width: 30px; height: 30px; }

.bubble-color-1 { background: #f8d95b; } /* gold */
.bubble-color-2 { background: #ffd700; } /* yellow */
.bubble-color-3 { background: #f5e960; } /* light gold */

@keyframes floatAround {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(var(--x-move), var(--y-move));
  }
}