Heart of a queen

/**
// http://na.finalfantasyxiv.com/pr/world
// why they using javascript ??
$(function(){
    var posY1 = 0;
    var posY2 = 0;
    var posY3 = 0;
    var imgH = 500;
    setInterval(function(){
	      if (posY1 <= -900) posY1 = 0;
	      if (posY2 <= -900) posY2 = 0;
	      if (posY3 <= -1200) posY3 = 0;
	      posY1 -= 1;
	      posY2 -= 2;
	      posY3 -= 3;
	      $('.crystal_01').css({ backgroundPosition: '0' + posY1 + 'px' });
	      $('.crystal_02').css({ backgroundPosition: '0' + posY2 + 'px' });
	      $('.crystal_03').css({ backgroundPosition: '0' + posY3 + 'px' });
    },50);

    $(window).scroll(function () {
	      pageNavFunc();
    });
    pageNavFunc();
});
//*/

--

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);


   #container {
      background-image: url("https://i.imgur.com/elvOXl7.jpg");
  background-repeat: repeat;
  background-size: 100% 100%;
  background-position: bottom right;
    width: 100%;
    height: 100%;
    opacity:0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index:2;
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    }

    #container:hover{
    opacity:1;
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    }

body {
  background: #0e8414;
}



body {
    background-image: url("https://i.imgur.com/S5qf7kH.gif");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: bottom right;
    width: 100%;
    height: 100%;
  margin: 0px;
  overflow: hidden;

}
 #credit {
position: fixed;
bottom: 20px;
right: 20px;
background-color: transparent;
 animation: emerald 3s 1;
 -webkit-animation: emerald 3s 1;
}
 .right{
position:absolute;
top:-22px;
left:140px;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
text-decoration: none;
font-size: 24px;
line-height: 24px;
letter-spacing: -1px;
color: #ffe650;
}

 .diamonds{
position:absolute;
top:10px;
left:88px;
width:330px;
height:180px;
overflow:hidden;
z-index:20;
}

 .far{
width:330px;
height:180px;
overflow:auto;
}

 .tell{
color:#dfeff1;
font-size:14px;
text-align:justify;
line-height:14px;
font-family:cambria;
letter-spacing:0.3px;
margin: 5px;
}
a.gone:link, a.gone:active, a.gone:visited{
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
text-decoration: none;
font-size: 24px;
line-height: 24px;
letter-spacing: -1px;
color: #f77481;
margin-right:12px;
z-index:10;
}

a.gone:hover{
text-shadow:-4px 0px 0px #ffe650;
}

b {
color: #50cfff;
font-weight:bold;
letter-spacing: 1px;
}

i{
color:#ffffff;
font-style:italic;
}

u{
font-style:italic;
text-decoration:noneunderline;
}

a:active, a:link, a:visited{
color:#fff;
text-decoration:none;
}
a:hover{
cursor:all-scroll;
color:#4e3f64;
text-decoration:line-through;
}

h1 {
font: normal 18px 'cambria';
text-align:center;
border-bottom: 1px solid #ffffff;}

::-webkit-scrollbar {width: 3px;}
::-webkit-scrollbar-thumb:vertical {
height: 10px;background-color: #D98878;}
::-webkit-scrollbar-thumb:horizontal {
height: 10px;background-color: #D98878;border: 0px ;width: 15px;}



#sparkle{
width:700px;
height: 200px;
background:#17253d;
border-radius: 100px 50px 50px 100px;
z-index: 4;

}


 .brightly{
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
 animation: emerald 3s 1;
 -webkit-animation: emerald 3s 1;

}
 .portal{
position: absolute;
bottom: -70px;
width: 500px;
margin:auto;
left:0;
right:0;
z-index:99;
 animation: emerald 3s 1;
 -webkit-animation: emerald 3s 1;
}




@keyframes emerald{
 from{
 right: -50%;
 opacity: 0;
 }
}

@-webkit-keyframes emerald{
 from{
 right: -50%;
 opacity: 0;
 }
}

.lovely {
position: fixed;
bottom: 0px;
right: 20%;
z-index: 1;
animation: emerald 3s 1;
-webkit-animation: emerald 3s 1;
}
#crystals {
    position:fixed;
    top:0;
    left:0;
    width:480px;
    height:100%;
}
@-webkit-keyframes bg-crystal001 {	100%	{background-position: 0px 900px;}}
@-moz-keyframes bg-crystal001 {  	100%	{background-position: 0px 900px;}}
@-o-keyframes bg-crystal001 {		100%	{background-position: 0px 900px;}}
@keyframes bg-crystal001 {			100%	{background-position: 0px 900px;}}
#crystals .crystal_01 {
    position:absolute;
    width:100%;
    height:100%;
    background:url(https://i.imgur.com/Rci4cX7.png)repeat-y;
	-webkit-animation: bg-crystal001 30s infinite;
	-moz-animation: bg-crystal001 30s infinite;
	-o-animation: bg-crystal001 30s infinite;
	animation: bg-crystal001 30s infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
}
@-webkit-keyframes bg-crystal002 {	100%	{background-position: 0px 900px;}}
@-moz-keyframes bg-crystal002 {  	100%	{background-position: 0px 900px;}}
@-o-keyframes bg-crystal002 {		100%	{background-position: 0px 900px;}}
@keyframes bg-crystal002 {			100%	{background-position: 0px 900px;}}
#crystals .crystal_02 {
    position:absolute;
    width:100%;
    height:100%;
    background:url()repeat-y;
	-webkit-animation: bg-crystal002 60s infinite;
	-moz-animation: bg-crystal002 60s infinite;
	-o-animation: bg-crystal002 60s infinite;
	animation: bg-crystal002 60s infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
}
@-webkit-keyframes bg-crystal003 {	100%	{background-position: 0px -1200px;}}
@-moz-keyframes bg-crystal003 {  	100%	{background-position: 0px -1200px;}}
@-o-keyframes bg-crystal003 {		100%	{background-position: 0px -1200px;}}
@keyframes bg-crystal003 {			100%	{background-position: 0px -1200px;}}
#crystals .crystal_03 {
    position:absolute;
    width:100%;
    height:100%;
    left:50%;
    margin-left:-180px;
	background:url( )repeat-y;
	-webkit-animation: bg-crystal003 90s infinite;
	-moz-animation: bg-crystal003 90s infinite;
	-o-animation: bg-crystal003 90s infinite;
	animation: bg-crystal003 90s infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
}

#worldCrystals {
    position:fixed;
    top:150px;
    left:0;
    width:100%;
    height:520px;
}
#worldCrystals .crystal_01 {
    position:absolute;
    width:100%;
    height:100%;
    background:url(https://www.magnat-lzr.com/wp-content/themes/magnat-lzr/images/particles/red/216.png)no-repeat -500px 0px;
}
@-webkit-keyframes bg-crystal004 {	100%	{background-position: 1198px 0px;}}
@-moz-keyframes bg-crystal004 {  	100%	{background-position: 1198px 0px;}}
@-o-keyframes bg-crystal004 {		100%	{background-position: 1198px 0px;}}
@keyframes bg-crystal004 {			100%	{background-position: 1198px 0px;}}
#worldCrystals .crystal_02 {
    position:absolute;
    width:100%;
    height:100%;
    background:url(https://i.imgur.com/ZMRXRIE.png)repeat-x;
	-webkit-animation: bg-crystal004 60s infinite;
	-moz-animation: bg-crystal004 60s infinite;
	-o-animation: bg-crystal004 60s infinite;
	animation: bg-crystal004 60s infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
}
@-webkit-keyframes bg-crystal005 {	100%	{background-position: 1086px 0px;}}
@-moz-keyframes bg-crystal005 {  	100%	{background-position: 1086px 0px;}}
@-o-keyframes bg-crystal005 {		100%	{background-position: 1086px 0px;}}
@keyframes bg-crystal005 {			100%	{background-position: 1086px 0px;}}
#worldCrystals .crystal_03 {
    position:absolute;
    width:100%;
    height:100%;
    left:50%;
    margin-left:-180px;
	background:url(https://i.imgur.com/jv3KbkP.png)repeat-x;
	-webkit-animation: bg-crystal005 90s infinite;
	-moz-animation: bg-crystal005 90s infinite;
	-o-animation: bg-crystal005 90s infinite;
	animation: bg-crystal005 90s infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
}

#words3{
 position:absolute;
  font-family:'Press Start 2P';
 font-size: 55px;
 font-align:center;
 bottom: 50%;
 left: 4%;
 height: 140px;
 background: #transparent;
 background: url(https://i.imgur.com/cPdY0aB.gif) -20px -20px repeat;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
-ms-transform: rotate(12deg);
-webkit-transform: rotate(12deg);
transform: rotate(12deg);
}
---
 <div id="words3">
"Make me mad?<Br>And heads will roll."
</div>


<div id="container">
<div id="worldCrystals">
<div class="crystal_01"></div>
<div class="crystal_02"></div>
<div class="crystal_03"></div>
</div>
<div id="crystals">
<div class="crystal_01"></div>
<div class="crystal_02"></div>
<div class="crystal_03"></div>
</div>

<div id="sparkle" class="brightly">
 <div class="lovely">
<img src="https://i.imgur.com/GC9NQKG.png" height="500px"></div>
<div class="diamonds">
<div id="we" class="far"><div class="tell">

<h1>Stats</h1>

<font style="float:left"><b>➽Name</b></font>
<font style="float:right">Elizabeth Marison</font><br>
<font style="float:left"><b>➽Nicknames</b></font>
<font style="float:right">Eliza, Beth, Betty, Lizzy</font><br>
<font style="float:left"><b>➽Age</b></font>
<font style="float:right">36</font><br>
<font style="float:left"><b>➽Gender</b></font>
<font style="float:right">♀ Female</font><br>
<font style="float:left"><b>➽Race</b></font>
<font style="float:right">Human</font><br>
<font style="float:left"><b>➽Height + Weight</b></font>
<font style="float:right">6ft 1inches・105 lbs</font><br>
<font style="float:left"><b>➽Hair + Eye </b></font>
<font style="float:right">Blake・Grey</font><br>
<font style="float:left"><b>➽Origin</b></font>
<font style="float:right">Queen of Hearts</font><br>
<font style="float:left"><b>➽Occupation</b></font>
<font style="float:right">Head the Queens Circle</font><br>
<font style="float:left"><b>➽Sexual Orientation</b></font>
<font style="float:right">Omni-sexual</font><br>
<font style="float:left"><b>➽Martial Status</b></font>
<font style="float:right">Single</font><br>

</div></div>
<div id="have" class="far"><div class="tell">
<h1>About</h1><br>
<p>A woman of elegance and grace.... Tall, dark, and beautiful. However you'd like to call her, she is a 'lady'. Her role as head of the queen's circle puts her in a position of power, as the 'queen'. And because of this she is very entitled. Feeling like she is a literal queen. If it was possible she'd be making sure people bowed in her presence. But while she does have a mightier then thou approach to things, she isn't nonsensical. Despite her attitude, she was not born powerful. She worked hard to get where she was and to take what she had. If anything just for a sense of worth. And the more she got her hands on the more she
</p>
</div></div>
<div id="noticed" class="far"><div class="tell">
<h1>STUFF</h1>
<p>WIP</p></div></div>
<div id="you" class="far"><div class="tell">
<h1>Friends</h1>
<a target="_blank" href="" target="_blank" title="Words"><img src=" " class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="profile.php?user=Friend name " target="_blank" title="Words"><img src="url" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="profile.php?user=Friend name " target="_blank" title="Words"><img src="url" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="profile.php?user=Friend name " target="_blank" title="Words"><img src="url" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="profile.php?user=Friend name " target="_blank" title="Words"><img src="url" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="profile.php?user=Friend name " target="_blank" title="Words"><img src="url" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<h1>Aquaintences</h1>
<a target="_blank" href="profile.php?user=Friend name " target="_blank" title="Words"><img src="url" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="profile.php?user=Friend name " target="_blank" title="Words"><img src="url" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="profile.php?user=Friend name " target="_blank" title="Words"><img src="url" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="profile.php?user=Friend name " target="_blank" title="Words"><img src="url" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="profile.php?user=Friend name " target="_blank" title="Words"><img src="url" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="profile.php?user=Friend name " target="_blank" title="Words"><img src="url" class="circle" width="40" height="40" border="1px solid #000000" ></a>


</div></div>
<div id="come" class="far"><div class="tell">
<h1>Rules</h1>
<b>01.</b> PM friendly most of the time.<br>
<b>02.</b> Time for some math, to save rule counts IC =/= OOC , OOC > IC, Story > Smut, Quality > Quanity. Am I missing anything?<br>
<b>03.</b> She is not your bitch.<br>
<b>04.</b> I play this character. Not one you give me.<br>
<b>05.</b> Smut is not a priority <br>
<b>06.</b> I'll find something for here soon.<br>
<b>07.</b> Skype and Discord are available for friends.<br>
<b>08.</b> This OC is oriented towards more fantasy themes but can be adjusted.<Br>
<b>10.</b> Do not touch the layout!<br>
<b>11.</b> Constant WIP.<br>
</div></div></div>

 <div class="portal">
<a href="#we" class="gone"><font size="24">♥</font></a>
 <a href="#have" class="gone"><font size="24">♚</font></a>
<a href="#noticed" class="gone"><font size="24">♥</font></a>
 <a href="#you" class="gone"><font size="24">♚</font></a>
<a href="#come" class="gone"><font size="24">♥</font></a></div>
</div><div id="credit">
<a target="_blank" href="https://roleplay.chat/profile.php?user=Green+Bean" target="_blank" title="Code was created by Green Bean Do NOT touch, this Please! If you want a code just mail Green Bean directly. She will gladly hook you up. With some freebies or cheapo comissions."><img src="https://i.imgur.com/uP9E5Pz.png" height="90px"></a></div>
</div></div></div></div>



</div>