Button get cover by background effect using CSS on React-CodePudding

I have been trying to create a simple background effect with CSS but I realize it could cover up all content including the button, so I won't be able to click on it, how could I put the effect at the back of the page, please?

Here are my codes:

https://codesandbox.io/s/gracious-carlos-z9nikn?file=/src/App.js:23-598

Edit: I have forgotten to add a background color, I have tried z-index:-999 it will go behind the background color instead, is there another way of doing it?

CodePudding user response：

circles is covering all contents.
So adding -9999 to the z-index of the circles class will solve it.

.circles {
 z-index: -9999;
 background-color: black;
 ... 
}

The code is below:
https://codesandbox.io/s/wonderful-blackburn-shzjoe?file=/src/styles.css