Photosensitivity Warning

I'm trying to add a warning for the bright colors and lights in my profile but no matter what i do because my profile has low opacity it is transferring over to the warning. Idk what to do i am tempted to give up, ive spent hours trying to get this code to work. If anyone has found a way to make a warning before their profile work with a low opacity profile without the warning being see-through lmk. please. Heres the layout code I'm using: <!-- (c) Layout created by Lyonid (https://layouts.spacehey.com/layout?id=27619) -->

<div id="profile">

<h1>🚨 Photosensitivity Warning</h1>

<p>This profile includes the following visuals that may trigger photosensitive seizures.</p>

<ul>

<li>Flashing Images (Strobe)</li>

<li>Moving Repeated Patterns</li>

<li>Bright Colors (Eye Strain)</li>

<li>Chromatic Aberration (Glitching)</li>

</ul>

<a href="#profile">Gotcha</a>

<a href="https://spacehey.com/home">Back Home</a>

<img src="https://i1.lensdump.com/i/Tvn63z.jpeg"/>

</div>

<style> 

:root {

  --warning-background-color: white;

  --warning-text-color: black;

}

#profile {

 position: fixed;

 z-index: 100;

 top: 0; 

 left: 0;

 width: 100vw;

 height: 100vh;

 padding: 50px 100px;

 font-size: 200%;

 background-color: var(--warning-background-color);

 color: var(--warning-text-color);

 overflow-y: scroll;

 opacity: 1;

 transition: .2s;

}

#profile > * {

 width: 100%;

 max-width: 700px!important;

 margin: 20px auto;

 display: block;

}

#profile:target {

 opacity: 0;

 visibility: hidden;

}

#profile > a {

 text-align: center;

 font-weight: bold;

}

#profile > ul {

 padding: 10px 50px;

 border: 2px dashed var(--warning-text-color);

}

</style>