:root {
    --animation-bg: #f00;
    --animation-bg1: #ff0;
}

body.blurry .bubbles {
    filter: blur(35px);
    transform: translate3d(0, 0, 0);
    will-change: filter
}

.bubbles-container {
    top: 0;
    left: 0;
    z-index: -1;
    position: fixed;
    width: 25vw;
    height: 25vh;
    transform-origin: top left;
    transform: translate3d(0, 0, 0) scale(4);
}

.bubbles {
    transform-origin: center center;
    /*top: 0;*/
    /*left: 0;*/
    /*transform: translate3d(0, 0, 0) scale(3);*/

    width: 100%;
    height: 100%;
}

@media (orientation: landscape) {
    .bubbles {
        /*width: 640px;*/
        /*aspect-ratio: 16/9;*/
    translate3d(0, 0, 0) scale(3);
    }
}

@media (orientation: portrait) {
    .bubbles {
        /*width: 50%;*/
        /*aspect-ratio: 9/16;*/
    translate3d(0, 0, 0) scale(2);
    }

}

.bubble {
    position: absolute;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    mix-blend-mode: lighten;
    will-change: transform;
}

.bubbleinner {
    position: absolute;
    inset: 0;
}

.innerbubble {
    position: absolute;
    width: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    /*overflow: hidden;*/
    will-change: transform;

}

.innerbubble-dark {
    position: absolute;
    width: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-image: radial-gradient(var(--bgcolor), var(--bgcolor-0)) !important;
    will-change: transform;

}


.innerbubble-top {
    position: absolute;
    width: 60vW;
    aspect-ratio: 1;
    border-radius: 50%;
    /*filter: blur(80px);
    /*aimation: down  infinite;*/
    overflow: hidden;
    will-change: transform;

}

innerbubble-right {
    position: absolute;
    right: 0;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    /* filter: blur(80px);
        /*animation: up  infinite;*/
    mix-blend-mode: lighten;
    will-change: transform;

}

.innerbubble-bottom {
    position: absolute;
    left: 0;
    width: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    /* animation: left  infinite;*/
    will-change: transform;

}

.innerbubble-left {
    position: absolute;
    right: 0;
    left: auto;
    width: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    /*filter: blur(20px);
        /*animation: right  infinite;*/
    will-change: transform;

}


.innerbubble-dark2 {
    position: absolute;
    left: 50%;
    bottom: calc(0px - 15%);
    right: auto;
    top: auto;
    height: 30%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-image: radial-gradient(#000, #000) !important;

}

.bubble1,
.innerbubble1 {
    /*animation-duration: var(--animation-time) !important;*/
    background-image: radial-gradient(var(--animation-bg), #000);
}

.bubble2,
.innerbubble2 {
    /*background-image: radial-gradient(cyan, #000); */
    background-image: radial-gradient(var(--animation-bg-1), #000) !important;
    /*        transition: all ease .3s;*/
}

/*


.bubbles {
    position: fixed;
    inset: 0;
    transform: translate3d(0, 0, 0);
    z-index: -1;
    background-color:var(--bggridoverlay) ;

}

body.blurry .bubbles {
    -webkit-filter: blur(86px);
    -moz-filter: blur(86px);
    filter: blur(86px);
}

@keyframes bubblesIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

.bubbles {
    --bubblesize2: calc(var(--bubblesize) / 1.5);
    --bubblesradius: 50%;
}

@media (orientation: landscape) {
    .bubbles {
        --bubblesize: 70vW;
    }
}

@media (orientation: portrait) {
    .bubbles {
        --bubblesize: 70vH;
    }
}
.bubble {opacity: 1}
.bubble1 {
    position: absolute;
    left: 0;
    aspect-ratio: 1;
    border-radius: var(--bubblesradius);
    mix-blend-mode: lighten;
    left: calc(50% - calc(var(--bubblesize) / 2));
    top: calc(50% - calc(var(--bubblesize) / 2));
    transform: translate(calc(var(--bubblesize) * -0.5), calc(var(--bubblesize) * -0.5));
}

.bubble1 {
    width: var(--bubblesize);
}

.bubble2 {
    width: var(--bubblesize2);
    left: calc(50% - calc(var(--bubblesize2) / 2));
    top: calc(50% - calc(var(--bubblesize2) / 2));
    transform: translate(calc(var(--bubblesize) * 0.5), calc(var(--bubblesize) * 0.5));
}

.bubble2 {
    position: absolute;
    left: calc(50% - 20vW);
    top: calc(50% - 20vW);
    aspect-ratio: 1;
    border-radius: var(--bubblesradius);
    mix-blend-mode: lighten;
}

.bubbleinner {
    position: absolute;
    inset: 0;
}

.innerbubble-top {
    position: absolute;
    width: 70%;
    aspect-ratio: 1;
    border-radius: var(--bubblesradius);
    !*filter: blur(80px);
    !*aimation: down  infinite;*!
    overflow: hidden;
}

innerbubble-right {
    position: absolute;
    right: 0;
    width: 70%;
    aspect-ratio: 1;
    border-radius: var(--bubblesradius);
    !* filter: blur(80px);
        !*animation: up  infinite;*!
    mix-blend-mode: lighten;
}

.innerbubble-bottom {
    position: absolute;
    left: 0;
    width: 50%;
    aspect-ratio: 1;
    border-radius: var(--bubblesradius); !* animation: left  infinite;*!
}

.innerbubble-left {
    position: absolute;
    right: 0;
    left: auto;
    width: 50%;
    aspect-ratio: 1;
    border-radius: var(--bubblesradius);
    !*filter: blur(20px);
        !*animation: right  infinite;*!
}

.innerbubble-dark {
    position: absolute;
    left: auto;
    aspect-ratio: 1;
    border-radius: var(--bubblesradius);
    background-color: var(--bgcolor) !important;
    mix-blend-mode: darken;
}

.innerbubble-dark-1 {
    top: calc(0px);
    left: calc(0px);
    width: 50%;
}

.innerbubble-dark-2 {
    top: calc(0%);
    left: calc(70%);
    width: 60%;
}

.innerbubble-dark-3 {
    top: calc(70%);
    left: calc(0px);
    width: 70%;
}

.innerbubble-dark-4 {
    top: calc(70%);
    left: calc(70%);
}

.innerbubble-dark-holder.innnerbubble-dark-holder-1 {
    position: absolute;
    aspect-ratio: 1;
    width: 30%;
    top: calc(0px);
    left: calc(0px);
    border-radius: var(--bubblesradius);
    background-color: var(--bgcolor) !important;
}

.innerbubble-dark-holder.innnerbubble-dark-holder-2 {
    position: absolute;
    aspect-ratio: 1;
    width: 30%;
    top: calc(70%);
    left: calc(70%);
    border-radius: var(--bubblesradius);
    background-color: var(--bgcolor) !important;
}

!*
    @keyframes down {
        0%, 100% {
            top: -10%
        }
        70% {
            top: 90%;
        }
    }

    @keyframes downinner {
        0%, 100% {
            bottom: 0%
        }
        70% {
            bottom: 100%;
        }
    }

    @keyframes up {
        0%, 100% {
            bottom: 0%
        }
        70% {
            bottom: 95%;
        }
    }

    @keyframes left {
        0%, 100% {
            left: 10%
        }
        70% {
            left: 75%;
        }
    }

    @keyframes right {
        0%, 100% {
            right: -10%
        }
        70% {
            right:90%;
        }
    }
*!
#down {
    left: 20%;
    top: 0;
}

#down1 {
    left: 60%;
    top: -20%
}

.bubble1,
.innerbubble1 {
    !*animation-duration: var(--animation-time) !important;*!
    background-image: radial-gradient(var(--maincolor), transparent);
}

.bubble2,
.innerbubble2 {
    background-image: radial-gradient(var(--seccolor), transparent);
}
*/