[BUBBLESWRAPPER]{
     position: absolute;
     pointer-events:none;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     overflow: hidden;
}

 [BUBBLES]{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
}
 [BUBBLES] li{
     position: absolute;
     list-style: none;
     display: block;
     width: 40px;
     height: 40px;
     background-color: antiquewhite;
     opacity: .3;
     bottom: -160px;
     animation: square 25s infinite;
     transition-timing-function: linear;
}
 [BUBBLES] li:nth-child(1){
     left:10%;
     bottom:-50px;
}
 [BUBBLES] li:nth-child(2){
     left: 20%;
     width: 80px;
     height: 80px;
     animation-delay: 2s;
     animation-duration: 17s;
}
 [BUBBLES] li:nth-child(3){
     left: 25%;
     animation-delay: 4s;
}
 [BUBBLES] li:nth-child(4){
     left: 40%;
     width: 60px;
     height: 60px;
     animation-duration: 22s;
     opacity:.25;
}
 [BUBBLES] li:nth-child(5){
     left:70%;
}
 [BUBBLES] li:nth-child(6){
     left: 80%;
     width: 120px;
     height: 120px;
     animation-delay: 3s;
     opacity:.2;
}
 [BUBBLES] li:nth-child(7){
     left: 32%;
     width: 160px;
     height: 160px;
     animation-delay: 7s;
}
 [BUBBLES] li:nth-child(8){
     left: 55%;
     width: 20px;
     height: 20px;
     animation-delay: 15s;
     animation-duration: 40s;
}
 [BUBBLES] li:nth-child(9){
     left: 25%;
     width: 10px;
     height: 10px;
     animation-delay: 2s;
     animation-duration: 40s;
     opacity:.4;
}
 [BUBBLES] li:nth-child(10){
     left: 90%;
     width: 160px;
     height: 160px;
     animation-delay: 11s;
}
[BUBBLES]+*{
	z-index:1;
}
 @keyframes square {
     0% {
         transform: translateY(0);
    }
     100% {
         transform: translateY(-200vh) rotate(600deg);
    }
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}