@keyframes bubblePulse {
    0% { transform: scale(2, 1) translate(-50%, 50%); } /* bottom left */
    25% { transform:  scale(1, 1) translate(50%, 50%); } /* bottom right */
    50% { transform: scale(2, 1) translate(50%, -50%); } /* top right */
    75% { transform: scale(1, 1) translate(-50%, -50%); } /* top left */
    100% { transform: scale(2, 1) translate(-50%, 50%); } /* bottom left */
}

@keyframes bubblePulse2 {
    0% { transform: scale(2, 1) translate(50%, -50%); } /* top right */
    25% { transform:  scale(1, 1) translate(-50%, -50%); } /* top left */
    50% { transform: scale(2, 1) translate(-50%, 50%); } /* bottom left */
    75% { transform: scale(1, 1) translate(50%, 50%); } /* bottom right */
    100% { transform: scale(2, 1) translate(50%, -50%); } /* top right */
}

#bubble1 {
    width: 75%;
    height: 75%;
    flex-shrink: 0;

    border-radius: 100%;
    background: linear-gradient(45deg, #A8F6EF 39.5%, #F2E4FF 69.89%);
    filter: blur(100px);

    z-index: 0;
    
    animation: bubblePulse 20s ease-in-out infinite;
}

#bubble2 {
    width: 75%;
    height: 75%;
    flex-shrink: 0;

    border-radius: 100%;
    background: linear-gradient(-45deg, #FFEFEB 39.5%, #B5ABE5 69.89%);
    filter: blur(100px); 

    z-index: 0;
    
    animation: bubblePulse2 21s linear infinite;
}

#demo-container {
    z-index: 1;
}