Why aren't my CSS styles being applied when using the :target pseudo class on Wordpress?

Question

I have a codepen here: https://codepen.io/tylerjms7/pen/ZEEvRyV where I've used the:target pseudo class as a way of opening and closing a modal.

The problem is when I take that exact same code and apply it to a Wordpress site here: https://goals.brandoncollins.org/test-target it doesn't work.

Basically the styles aren't being applied to the:target element for some reason. But I can't figure out why. The thing that is weird is that if I open that link in a new tab with the #creategp at the end the style will work initially to open the modal. When I click the close icon it also works to remove the styles and hide the modal as expected. But then clicking the modal again won't work just as before.

So why aren't the styles being applied? Also, why are they being applied on a new tab?

<a href="#creategp" class="ty-modal-launch">Open Modal</a>
<!-- The Modal -->
<div id="creategp">
    <div class="ty-modal">
        <a href="#close" title="Close" class="closeit">X</a>
        <p>Modal Content</p>
    </div>
</div>


#creategp:target {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s, visibility 1s;
}


#creategp:target {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s, visibility 1s;
}

When I run this in Codepen I get exactly what I want. But when I add these same HTML and styles to my wordpress site it doesn't work unless I open it in a new tab. And then it only works once.

Answer 1

I had some debug with chrome tool and your CSS code didn't work because of this:

goals.brandoncollins.org/wp-content/themes/pro/framework/dist/js/site/x.js?ver=3.0.4

When I block request for that js url: