/*********/
/* FRAME */
/*********/

.bubbles {
    position: relative;
    width: 100vw;
    height: 100vh;
}

.bubbles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; 
    height: 100vh; 
    z-index: 0;
}

.bubbles_1,
.bubbles_2,
.bubbles_3 {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
}

/******************/
/*  BUBBLE TYPE 1 */
/******************/

.wave_1 {
    width: 150px;
    height: 150px;
    background-color: #311c06;
    border-radius: 50%; 
    animation: wave_1 15s 1 linear forwards;
    position: relative;
    opacity: 1;
    visibility: hidden;
    margin-top: 10px;
}

@keyframes wave_1 {
    0%   { 
        transform: translate(1900px, 0px) translateY(0px); 
        width: 150px;
        height: 150px;
    }
    25%  { 
        transform: translate(1500px, 0px) translateY(140px); 
        animation-timing-function: linear; 
        visibility:visible;
    }
    50%  { 
        transform: translate(950px, 0px) translateY(30px); 
        animation-timing-function: linear; 
        visibility:visible;
        width: 100px;
        height: 100px;
    }
    75%  { 
        transform: translate(450px, 0px) translateY(100px); 
        animation-timing-function: linear; 
        visibility:visible;
    }
    100% { 
        transform: translate(-150px, 0px) translateY(70px); 
        animation-timing-function: linear;
        width: 150px;
        height: 150px;
        visibility: hidden;
    }
}

/******************/
/*  BUBBLE TYPE 2 */
/******************/

.wave_2 {
    width: 50px;
    height: 50px;
    background-color: #311c06;
    border-radius: 50%; 
    animation: wave_2 14s 1 linear forwards;
    position: relative;
    margin-top: 30px;
    opacity: 1;
    visibility: hidden;
}

@keyframes wave_2 {
    0%   { 
        transform: translate(1900px, 0px) translateY(0px); 
        width: 50px;
        height: 50px;
    }
    25%  { 
        transform: translate(1350px, 0px) translateY(50px); 
        animation-timing-function: linear; 
        visibility:visible;
    }
    50%  { 
        transform: translate(950px, 0px) translateY(-20px); 
        animation-timing-function: linear; 
        visibility:visible;
        width: 70px;
        height: 70px;
    }
    75%  { 
        transform: translate(450px, 0px) translateY(80px); 
        animation-timing-function: linear; 
        visibility:visible;
    }
    100% { 
        transform: translate(-100px, 0px) translateY(-20px); 
        animation-timing-function: linear;
        width: 50px;
        height: 50px;
        visibility: hidden;
    }
}

/******************/
/*  BUBBLE TYPE 3 */
/******************/

.wave_3 {
    width: 80px;
    height: 80px;
    background-color: #311c06;
    border-radius: 50%; 
    animation: wave_3 16s 1 linear forwards;
    position: relative;
    margin-top: 20px;
    visibility: hidden;
}

@keyframes wave_3 {
    0%   { 
        transform: translate(1900px, 0px) translateY(100px); 
    }
    25%  { 
        transform: translate(1500px, 0px) translateY(200px); 
        animation-timing-function: linear; 
        visibility:visible;
    }
    50%  { 
        transform: translate(950px, 0px) translateY(120px); 
        animation-timing-function: linear; 
        visibility:visible;
        width: 100px;
        height: 100px;
    }
    75%  { 
        transform: translate(475px, 0px) translateY(180px); 
        animation-timing-function: linear; 
        visibility:visible;
    }
    100% { 
        transform: translate(-100px, 0px) translateY(150px); 
        animation-timing-function: linear;
        width: 80px;
        height: 80px;
        visibility: hidden;
    }
}

/*****************/
/*  BUBBLE START */
/*****************/

.wave_1:nth-child(1) {
    animation-delay: 0.5s; 
}
    
.wave_1:nth-child(2) {
    animation-delay: 3.5s; 
}
    
.wave_1:nth-child(3) {
    animation-delay: 2.7s; 
}
    
.wave_1:nth-child(4) {
    animation-delay: 1.2s; 
}
    
.wave_1:nth-child(5) {
    animation-delay: 0.3s; 
}
    
.wave_1:nth-child(6) {
    animation-delay: 3.75s; 
}



.wave_2:nth-child(1) {
    animation-delay: 3.8s; 
}

.wave_2:nth-child(2) {
    animation-delay: 0s; 
}

.wave_2:nth-child(3) {
    animation-delay: 1.6s; 
}

.wave_2:nth-child(4) {
animation-delay: 0.3s; 
}

.wave_2:nth-child(5) {
animation-delay: 3s; 
}

.wave_2:nth-child(6) {
animation-delay: 0.9s; 
}



.wave_3:nth-child(1) {
animation-delay: 2.1s; 
}

.wave_3:nth-child(2) {
animation-delay: 1.6s; 
}

.wave_3:nth-child(3) {
animation-delay: 0.4s; 
}

.wave_3:nth-child(4) {
animation-delay: 2.7s; 
}

.wave_3:nth-child(5) {
animation-delay: 1.9s; 
}

.wave_3:nth-child(6) {
animation-delay: 0.9s; 
}