pop

<style>
@import url('https://fonts.googleapis.com/css2?family=Faster+One&family=Racing+Sans+One&display=swap');
a, a:link, a:active, a:visited {
	color: #f2902b;
	text-decoration: none;
}

::-webkit-scrollbar {
 width: .1px;
}

::-webkit-scrollbar-track {
 box-shadow: inset 0 0 5px grey;
 border-radius: 10px;
}

::-webkit-scrollbar-thumb {
 background: #b95595;
 border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
 background: #b95591;
}
body {
background-color: #ef9faf;
background-image: url("https://www.transparenttextures.com/patterns/hexellence.png");
	background-repeat:repeat;
	background-position: right bottom;}

.title1{
 position: fixed;
 bottom: -5vw;
 right: -22vw;
background-image: url('https://i.ibb.co/MZBRxbH/poptitle3.png') ;
 background-size: cover;
background-repeat: no-repeat;
display: inline-block;
opacity: 1;
height: 120vh;
width: 120vh;
z-index: -7;
animation: main 5s infinite;
animation-timing-function:linear;
 animation-delay: 0s;
}

.title2{
 position: fixed;
 bottom: -5vw;
 right: -17vw;
background-image: url('https://i.ibb.co/K6Dp8wN/popshadow2.png') ;
 background-size: cover;
background-repeat: no-repeat;
display: inline-block;
opacity: 1;
height: 120vh;
width: 120vh;
z-index: -8;
animation: main 5s infinite;
animation-timing-function:linear;
 animation-delay: 0s;
}

.pop{
 position: fixed;
 bottom: 0vw;
 right: 0vw;
background-image: url('https://i.ibb.co/N7qDtFF/ezgif-com-gif-maker-6.png') ;
 background-size: cover;
background-repeat: no-repeat;
 z-index: 2;
opacity: 1;
transition: .8s;
height: 100vh;
width: 55vh;
}

.pop a {
display: inline-block;
}

.pop:hover {
background-image: url('https://cdn.discordapp.com/attachments/649485777893326869/863948541818830878/Untitled_Artwork.gif') ;
 background-size: cover;
background-repeat: no-repeat;
display: inline-block;
}

.content{
position: fixed;
bottom: 42.8vw;
left: 60vw;
z-index: 1;
opacity: 1;
transition: .8s;
-moz-transition: .8s;
webkit-transition: .8s;
-o-transition: .8s;
}

.content:target{
bottom: 42.8vw;
left: 35.3vw;
z-index: 0;
opacity: 1;
}


.contentbox{
background-color: #8b0000;
border-right:10px solid #ed7470;
border-left:10px solid #ed7470;
padding: 5px;
font-family: 'Delius Swash Caps', cursive;
font-size:20px;
color: #4A96BA;
letter-spacing: 0px;
width: 320px;
height: 470px;
text-align: center;
z-index: 0;
overflow-y: scroll;
position: fixed;
opacity: 1;
}

@keyframes main{
 0% {  transform: rotate(0deg);}


 100% {    transform: rotate(360deg); }

}



</style>
<body>

<div class="pop">
</div>


<div class="title1">
</div>

<div class="title2">
</div>

<div id="one" class="content"><div class="contentbox">
<h1>Stats</h1>
<span style="float:left;"><b>Name</b></span><span style="float:right;">---</span><br>
<span style="float:left;"><b>Nickname</b></span><span style="float:right;">---</span><br>
<span style="float:left;"><b>Gender</b></span><span style="float:right;">---</span><br>
<span style="float:left;"><b>Race</b></span><span style="float:right;">---</span><br>
<span style="float:left;"><b>Height</b></span><span style="float:right;">---</span><br>
<span style="float:left;"><b>Weight</b></span><span style="float:right;">---</span><br>
<span style="float:left;"><b>Eyes</b></span><span style="float:right;">---</span><br>
<span style="float:left;"><b>Hair</b></span><span style="float:right;">---</span><br>
<span style="float:left;"><b>Orientation</b></span><span style="float:right;">---</span><br>
<span style="float:left;"><b>Relationship</b></span><span style="float:right;"><a target="_blank" href="">---</a></span><br>
<span style="float:left;"><b>Affiliation</b></span><span style="float:right;">---</span><br>


</div>


</body>