help w/ code breaking?

im trying to give my profile a warning screen as well as that floating animation thing that i see a bunch of cool profiles have but im having a lot of trouble getting them to work together? on their own they work fine but it seems like they just completely break when theyre both on my profile at the same time. does anyone know why tgis is happening? ill leave the code below the pics showing whats happening

this is what the warning screen is + code below

<div id="profile">

<h1>❗before you enter❗</h1>

<p>this profile is meant to be viewed on desktop, IT WILL NOT LOOK GOOD ON MOBILE/TABLET (my bad lol). there also might be some things in this profile you may not like, such as: </p>

<ul>

<li>bright moving colors (not strobe, just a lot of moving stuff)</li>

<li>eyes, specifically staring eyes (ommetaphobia)</li>

<li>autoplaying music (living in the sunlight - tiny tim)</li>

<li>cursing</li>

</ul>

<p>if thats all good with you, then welcome! if not, i hope you have a good day :) </p>

<a href="#profile">hello!!</a>

<a href="https://spacehey.com/home">goodbye!!</a>

<img src="https://static.wixstatic.com/media/69154f_9f3dec116da5459e9f345a18b1252f3a~mv2.gif"/>

</div>

<style> 

:root {

  --warning-background-color: #FFFFFF;

  --warning-text-color: #284880;

}

#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: 10px solid black;

 border-image: url(https://file.garden/ZCTlbRQZY2RSmYXG/deargodjr.png) 30 stretch;

border-radius: 5px;

var(--warning-text-color);

}

</style>

this is the floating shit + code

main {

animation: floating 3s ease-in-out infinite

}

.floating { 

    animation-name: floating;

    animation-duration: 3s;

    animation-iteration-count: infinite;

    animation-timing-function: ease-in-out;

    margin-left: 30px;

    margin-top: 5px;

}

@keyframes floating {

    0% { transform: translate(0,  0px); }

    50%  { transform: translate(0, 15px); }

    100%   { transform: translate(0, -0px); }

}

and this is what happens when the two are both on the profile at the same time.....

idk what to change or fix to make them both work (unless they cant work together at all?) i am struggling,,,,,,,,,,