How do I layer this fixed position 40% transparent accent circle on my page?

Site URL: https://primrose-lime-62ht.squarespace.com

So I had made a cool 40% transparent circle on the side of this site for my client, and it was pretty much behaving perfect: it was layered underneath all the different sections of the homepage, so all text on the page was sharp above it.

I did something trying to change the section height and my pink circle now only shows up at the top and bottom of the page.

It shows up properly for me when in EDITING mode, but then when I hit Done/Save, it hides behind stuff again. Photos are how it is SUPPOSED to behave. You can see it continues over the end of the green section and into the beige.

To see the site, the pw is "help".

Here is my code block:

<div class="pinkdot">
</div>

<style>
.pinkdot {
    font-size: 5vw;
background: rgba(224, 199, 202,.4);
  margin-left:auto;
    margin-right:auto;
    width:960px;
  position: fixed;
  top:5.5em;
  bottom:4em;
  left:12em;
  height: 5em;
  width: 5em;
    border-radius: 50%;
padding: 600px;
text-align: right;
}
</style>

I'm a graphic designer, super rudimentary at CSS so please go easy on me. My units are all a mess from some trial and error, but they were like that when it DID work, so it wasn't causing a problem in functionality to the best of my knowledge.