*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body
{
    min-height: 100vh;
    background-image: url("../images/AzureSpawnPic.png");
}
.bubbles-container
{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.bubbles {
position: relative;
display: flex;
}

.bubbles span
{
    position: relative;
    width: 30px;
    height: 30px;
    background-color: rgb(255, 255, 255);
    margin: 0 4px;
    border-radius: 50%;
    box-shadow: 0 0 0 10px #525151,
    0 0 50px #ffffff,
    0 0 100px #ffffff;
    animation: animate 35s linear infinite;
    animation-duration: calc(125s/var(--i));

}
.bubbles span:nth-child(even)
{
    background: #525151;
    box-shadow: 0 0 0 10px #52525244,
    0 0 50px #ffffff,
    0 0 100px #525151;
}
@keyframes animate
{
    0%
    {
        transform: translateY(100vh)scale(0.1);
    }
    100%
    {
        transform: translateY(-10vh)scale(0.2);
    }
}