my loading screen base layout

<div id="profile">

<ul>

<center>

<h1>HEADER</h1>

<img src="IMAGE ON THE RIGHT" style="float:right;width:30%;"/>

<img src="IMAGE ON THE LEFT" style="float:left;width:30%;"/>

<p>TEXT TEXT TEXT<br/>

<br/>TEXT TEXT TEXT<br/>TEXT TEXT TEXT

<br/>

<br/> TEXT TEXT TEXT<br/>

<br/><br/><br/>TEXT OVER ENTER/TURNBACK<br/>

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

<br/><a href="https://spacehey.com/home">turn back</a>

<br/><br/><br/>

</p><center><img src="IMAGE UNDER ENTER/TURN BACK"/>

<br/>

<a href="https://spacehey.com/obsessive">creds to tae!</a>

</center></center></ul></div>

<style>

:root {

  --warning-background-image: white;

  --warning-text-color: black;

}

#profile {

 position: fixed;

 background-image: url('BACKGROUND IMAGE');

 background-color: #fac3d1;

 z-index: 100;

 top: 0;

 left: 0;

 width: 100vw;

 height: 100vh;

 padding: 50px 100px;

 font-size: 150%;

 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 > ul {

 padding: 10px 50px;

 border: 5px double #ffc4d0;

 border-radius: 20px;

 background-color: white;

}

</style>