#background-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
}

#background-wrap.active {
    opacity: 1;
}

.bubble {
    border-radius: 50%;
    box-shadow: 0 20px 30px rgba(0, 0, 50, 0.4), inset 0px 10px 30px 5px rgba(100, 150, 255, 0.7);
    height: 200px;
    width: 200px;
    position: absolute;
    animation-play-state: paused;
    z-index: 11;
}

.bubble:after {
    content: "";
    position: absolute;
    left: 10px;
    height: 180px;
    width: 180px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(173, 216, 255, 0.5) 0%, rgba(0, 0, 255, 0) 70%);
    box-shadow: inset 0 20px 30px rgba(173, 216, 255, 0.3);
}

/* KEYFRAMES */
@keyframes animateBubble {
    0% { margin-top: 1000px; }
    100% { margin-top: -100%; }
}

@keyframes sideWays { 
    0% { margin-left:0px; }
    100% { margin-left:50px; }
}

/* ANIMATIONS */
.x1 { animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate; left:-5%; top:5%; transform: scale(0.6); }
.x2 { animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate; left:5%; top:80%; transform: scale(0.4); }
.x3 { animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate; left:10%; top:40%; transform: scale(0.7); }
.x4 { animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; left:20%; top:0; transform: scale(0.3); }
.x5 { animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; left:30%; top:50%; transform: scale(0.5); }
.x6 { animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate; left:50%; top:0; transform: scale(0.8); }
.x7 { animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate; left:65%; top:70%; transform: scale(0.4); }
.x8 { animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; left:80%; top:10%; transform: scale(0.3); }
.x9 { animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; left:90%; top:50%; transform: scale(0.6); }
.x10 { animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate; left:80%; top:80%; transform: scale(0.3); }

.bubble.fast {
    animation-duration: calc(var(--original-duration) / 3) !important;
    animation-play-state: running !important;
}