.g-container
    .g-wrap
        .g-footer
            - for(var i=0; i<200; i++)
                .g-bubble

html, body {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

:root {
    --color: #26b4f5;
}
.g-container {
    width: 100%;
    height: 100%;
}

.g-wrap {
    width: 100%;
    height: 100%;
    background: #fff;
    filter: contrast(8);
}

.g-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 86px;
    width: 100%;
    background: var(--color);
    // filter: blur(5px);
    
    &:before {
        content: "";
        position: absolute;
        top: -300px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        backdrop-filter: blur(5px);
    }
}

.g-bubble {
    position: absolute;
    border-radius: 50%;
    background-color: var(--color);
}

@for $i from 0 through 200 { 
    .g-bubble:nth-child(#{$i}) {
        $width: 30 + random(100) + px;
        left: #{(random(100)) + '%'};
        top: #{(30 + random(100))}px;
        width: $width;
        height: $width;
        animation: moveToTop #{(random(2500) + 1500) / 1000}s ease-in-out -#{random(5000)/1000}s infinite;
    }
}

@keyframes moveToTop {
    90% {
        opacity: 1;
    }
    100% {
        opacity: .08;
        transform: translate(-50%, -180px) scale(.3);
    }
}