Javascript Hides Webflow Elements?

I’m making pages to showcase some custom Javascript made in p5.js. I’d like to have the Java program run in the background with titles and menu options from Webflow in the foreground.

I can’t get the Webflow elements to show up. The program completely covers them!

The program generates many shapes to cover up previous interactions. How can I isolate this effect so that the Webflow elements remain visible regardless of what is happening in the background?

Here is my site Read-Only: [https://preview.webflow.com/preview/paigefolio?utm_medium=preview_link&utm_source=designer&utm_content=paigefolio&preview=82f4e6887e1325b25ae9a5367a7ee966&pageId=5e20b41fef29bc86cffc50ea&mode=preview]

Here is the live page: [https://www.paigefol.io/midnight-sun]
(The program is audio visualization, so if you get asked to use your mic, that’s why!)

You just need to set your z-index to something like 9999.

My hero. z-index was it!

I added this to the heading:

z-index: -1;

Permanently pushed all the custom code to the back.
Blessings upon you, jhiggins!