Bubble Background with Row

I am trying to add a bubble background into a row in tagdiv. I have created this background using CSS and add homeb into the extra class field. Now the bubble takes the elements inside the row but I want the bubbles to only flow under the elements. This code works on a test with HTML document inside cpanel but I don’t know what part of the Newspaper theme is making it not to work. The live page is shown at https://hiideemedia.com/new-home/

The CSS is;

/* Home bubbles with background */
.homeb {
height: 100%;
width: 100%;
background: linear-gradient(180deg, #ffffff, 5%, #119dff, 50%, #04fafd);
position: static;
}

.homeb div {
height: 60px;
width: 60px;
border: 2px solid rgba(90, 90, 255, 0.7);
border-radius: 50px;
position: static;
top: 10%;
left: 10%;
animation: 4s linear infinite;
}
.homeb div .dot {
height: 10px;
width: 10px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: static;
top: 20%;
right: 20%;
}
.homeb div:nth-child(1) {
top: 20%;
left: 20%;
animation: animate 8s linear infinite;
}
.homeb div:nth-child(2) {
top: 60%;
left: 80%;
animation: animate 10s linear infinite;
}
.homeb div:nth-child(3) {
top: 40%;
left: 40%;
animation: animate 3s linear infinite;
}
.homeb div:nth-child(4) {
top: 66%;
left: 30%;
animation: animate 7s linear infinite;
}
.homeb div:nth-child(5) {
top: 90%;
left: 10%;
animation: animate 9s linear infinite;
}
.homeb div:nth-child(6) {
top: 30%;
left: 60%;
animation: animate 5s linear infinite;
}
.homeb div:nth-child(7) {
top: 70%;
left: 20%;
animation: animate 8s linear infinite;
}
.homeb div:nth-child(8) {
top: 75%;
left: 60%;
animation: animate 10s linear infinite;
}
.homeb div:nth-child(9) {
top: 50%;
left: 50%;
animation: animate 6s linear infinite;
}
.homeb div:nth-child(10) {
top: 45%;
left: 20%;
animation: animate 10s linear infinite;
}
.homeb div:nth-child(11) {
top: 10%;
left: 90%;
animation: animate 9s linear infinite;
}
.homeb div:nth-child(12) {
top: 20%;
left: 70%;
animation: animate 7s linear infinite;
}
.homeb div:nth-child(13) {
top: 20%;
left: 20%;
animation: animate 8s linear infinite;
}
.homeb div:nth-child(14) {
top: 60%;
left: 5%;
animation: animate 6s linear infinite;
}
.homeb div:nth-child(15) {
top: 90%;
left: 80%;
animation: animate 9s linear infinite;
}
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}

The HTML I use on normal page to display it;

<div class=”homeb”>
<adam>Text on Animation</adam>
<div><span class=”dot”></span></div>
<div><span class=”dot”></span></div>
<div><span class=”dot”></span></div>
<div><span class=”dot”></span></div>
<div><span class=”dot”></span></div>
<div><span class=”dot”></span></div>
<div><span class=”dot”></span></div>
<div><span class=”dot”></span></div>
<div><span class=”dot”></span></div>
<div><span class=”dot”></span></div>
<div><span class=”dot”></span></div>
<div><span class=”dot”></span></div>
<div><span class=”dot”></span></div>
<div><span class=”dot”></span></div>
<div><span class=”dot”></span></div>
</div>