Twin profile

<style>

/*
PLEASE DO NOT REMOVE THIS CREDIT
DO NOT REMOVE THE CREDIT AT THE BOTTOM EITHER!
CREATOR: BLINKY// HAKUNO KISHINAMI
There is a Javascript at the base that prevents right click. Do not remove it. If you do not have Java you don't need to worry about it. But please do not remove it. You'll break the code.

THIS IS THE JAVA SCRIPT EDITION!

*/
 @import 'https://fonts.googleapis.com/css?family=Pacifico|Oswald:700';


@font-face{
 src:url(https://dl.dropboxusercontent.com/s/74xrxvex76h7sce/Zenzai%20Itacha.ttf);
 font-family:'Zenzai Itacha';
}

body {
  background: #929b82;
    background-image: url(" ");
  background-repeat: No-repeat;
  background-size: 100% 100%;
  background-position: bottom right;
}


 .right{
position:absolute;
top:-22px;
left:140px;
font-family: 'Oswald', 'Pacifico';
text-transform: uppercase;
text-decoration: none;
font-size: 24px;
line-height: 24px;
letter-spacing: -1px;
color: #497259;
}

 .diamonds{
position:absolute;
top:20px;
left:65px;
width:370px;
height:200px;
overflow:hidden;
z-index:20;
}

 .far{
width:360px;
height:200px;
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 #232a68;
}

b {
color: #39878b;
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-family:'Zenzai Itacha';
size: 40px;
text-align:center;
letter-spacing: 7px;
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:500px;
height: 300px;
background: #000000;
border-radius: 30px 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: 10px;
right: 50%;
width: 400px;
margin:auto;
right: 0px;
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 {
pointer-events:none;
position: fixed;
bottom: 0px;
left: 10%;
z-index: 1;
animation: emerald 3s 1;
-webkit-animation: emerald 3s 1;
}


#Wordymofo{
pointer-events:none;
 position:absolute;
font-family: 'Zenzai Itacha', cursive;
letter-spacing: 2px;
font-weight: normal;
 font-size: 60px;
 width: 310px;
 top: 120px;
 right: -140px;
 height: 140px;
 background: #transparent;
 background: url(https://i.imgur.com/wmTFoMS.gif) -20px -20px repeat;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);.

}
#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/YlJTXMB.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(https://i.imgur.com/fhLrKY8.png)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(https://i.imgur.com/GrvFkhB.png)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://i.imgur.com/dCMiLUR.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/LjW99ET.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/acTwACd.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;
}


</style>

<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="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 class="lovely">
<img src="https://pre00.deviantart.net/ca31/th/pre/i/2017/006/9/7/ren_cut_in_scene_by_rustyartist-dauikgm.png" width="400px"></div>
<div class="diamonds">

<div id="we" class="far"><div class="tell">

<h1>Dossier</h1>

<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>

<h1>Gallery</h1>

<a target="_blank" href="https://i.imgur.com/4suDKNQ.png" target="_blank" title="..."><img src="https://i.imgur.com/6zqFVlW.png" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="https://i.imgur.com/sUIh1sJ.jpg/" target="_blank" title=" ."><img src="https://i.imgur.com/6zqFVlW.png" class="circle" width="40" height="40" border="1px solid #000000" ></a>



</p>


</div></div>
<div id="have" class="far"><div class="tell">
<h1>About</h1><br>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel vulputate turpis. Integer vitae enim dignissim, lobortis dolor vel, blandit tellus. Nullam quis nisl facilisis, tincidunt mi in, hendrerit urna. Cras pharetra dolor et elementum condimentum. Pellentesque interdum orci magna, quis pellentesque ligula efficitur id. Sed aliquam pellentesque mi, vulputate volutpat mi laoreet sagittis. Fusce id justo hendrerit, tempus felis et, semper libero. Nulla ut mi eros. Donec ornare lectus id mi scelerisque pharetra.</p>

<p>Vivamus ut scelerisque erat. Aenean egestas consectetur massa sed placerat. Cras elit ante, porttitor eget velit nec, posuere dapibus risus. Aliquam erat volutpat. Praesent in turpis et purus lobortis rhoncus. Vivamus auctor mattis justo, posuere dignissim risus luctus vehicula. Cras condimentum tempus leo id tempor. Nunc semper, eros sed hendrerit iaculis, nisi lectus egestas libero, quis sollicitudin ex purus vel mauris.</p>

<p>Donec aliquam malesuada turpis sit amet consequat. Vestibulum ac vestibulum mauris. Quisque nibh nibh, sollicitudin a venenatis quis, scelerisque a neque. Phasellus luctus eget eros quis vestibulum. Phasellus suscipit suscipit dui ut fringilla. Donec pretium congue tortor eget gravida. Aenean aliquam neque ut ex mollis pulvinar. Pellentesque vel justo at erat consequat fermentum nec eu magna. Proin suscipit lacus ac massa suscipit facilisis ac ac eros. In sagittis turpis ac ornare tincidunt. Vestibulum eget elit et risus consectetur congue. Praesent congue lorem eu varius lobortis.</p>

<p>Aenean at iaculis nunc. Nulla ipsum mi, ullamcorper at interdum interdum, efficitur eu arcu. Quisque sit amet lectus sit amet diam semper porta. In vitae ante ex. Nunc ex erat, ultrices non faucibus quis, dapibus sit amet elit. Proin eu orci non mi malesuada sagittis non non erat. Fusce auctor magna efficitur urna convallis egestas. Etiam posuere velit vitae mauris fermentum facilisis.</p>

<p>Suspendisse sollicitudin nisi quis ligula ullamcorper malesuada. Sed placerat ac leo eget pulvinar. Praesent vehicula lacus non elit euismod, ac egestas ante aliquam. Vestibulum eu odio sit amet velit mollis viverra. Maecenas commodo quam in nunc fringilla tincidunt. Proin tincidunt hendrerit libero, a dapibus ipsum tincidunt a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, ligula nec rhoncus lobortis, erat eros dapibus ipsum, quis iaculis lacus turpis at diam. Curabitur dignissim fringilla metus vel tristique. Nam semper nulla sit amet magna semper fermentum.</p>


</div></div>
<div id="noticed" class="far"><div class="tell">
<h1>Skills + Magecraft</h1>
<font style="float:left"><b>➽Magical Circuits</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Elemental Affinity</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Command Seals</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Servant</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Language of Incantations</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Origin</b></font>
<font style="float:right">Stat</font><br>

<br><b>SPELL NAME:</b> Fist of Achilles
<br><b>TYPE:</b> Elemental
<br><b>CRAFT:</b> Force craft
<br><b>USAGE:</b>Creates a mineral/elemental shaped fist around users hand.
<Br>
<br><b>SPELL NAME:</b> Spear of Achilles
<br><b>TYPE:</b> Mineral
<br><b>USAGE:</b> Pulls minerals out of the ground to form a basic spear. Can be used to stab or throw.
<br>
<br><b>SPELL NAME:</b> Shield of Achilles
<br><b>TYPE:</b>Mineral
<br><b>USAGE:</b>Allows the user to change their genetic makeup in their body to create a 'Skin' of a mineral. The higher the mineral on the hardness scale, the heavier the body becomes but the better the defense.
</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> Rules.<br>
<b>02.</b> Rules.<br>
<b>03.</b> Rules.<br>
<b>04.</b> Rules.<br>
<b>05.</b> Rules.<br>
<b>06.</b> Rules.<br>
<b>07.</b> Rules.<br>
<b>08.</b> Rules.<br>
<b>10.</b> Do not touch the layout!<br>
</div></div></div>
 <div id="wordymofo"><br>
Brock Shi
</div>

</div></div></div></div></div>



</div>
<div style="position: fixed; bottom: 20px; right: 0px; background-color: transparent;">
<a target="_blank" href="https://roleplay.chat/profile.php?user=Hakuno+Kishinami" target="_blank" title="Code was created by Blinky/Hakuno Kishinami. Do NOT touch. Please! If you are interested in a code, please Shoot her a message or Mail! "><img src="https://i.imgur.com/n6pkfKn.png" height="10%"></a>