<style> @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>➽Name</b></font>
<font style="float:right">Brock Shi</font><br>
<font style="float:left"><b>➽Nickname</b></font>
<font style="float:right">The Rock King</font><br>
<font style="float:left"><b>➽Age</b></font>
<font style="float:right">24</font><br>
<font style="float:left"><b>➽Orientation</b></font>
<font style="float:right">[Redacted]</font><br>
<font style="float:left"><b>➽Organization</b></font>
<font style="float:right">Chaldea</font><br>
<font style="float:left"><b>➽Eye color</b></font>
<font style="float:right">Pale Pink</font><br>
<font style="float:left"><b>➽Hair color</b></font>
<font style="float:right">Black</font><br>
<font style="float:left"><b>➽Height</b></font>
<font style="float:right">5'9"</font><br>
<font style="float:left"><b>➽Weight</b></font>
<font style="float:right">170</font><br>
<font style="float:left"><b>➽Occupation</b></font>
<font style="float:right">Magus</font><br>

<h1>Gallery</h1>

<a target="_blank" href="https://i.pinimg.com/originals/da/2a/94/da2a94be0ea9d97e1b2ad71f3605442f.jpg" 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/6A7YgzQ.png" 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>Brock is a rather eccentric person, often appearing clumsy and scatterbrained, even when he's having a bad day. His excitable demeanor can throw people off rather easily as he doesn't seem like that type of person. Very rarely will he let his smile crack when he's down. He often comes off as playful and easygoing to most everyone but he will show his closest friends his other feelings. Even though he acts friendly, he has walls built up so that he almost never gets too close to anyone, even those he calls friends. He's known for his easy humor and caring side, extending his hand to any who he believes needs his help. His hobby includes martial arts and studying.</p>

<p>Brock hales from a small rural village in China, his father being a Japanese business man who would travel to and fro in his younger years, allowing him to eventually meet the daughter of a local Chinese farmer. It was love at first sight, so he said. He proposed to her after he had done business with her father, though this ended in quite a few failures at first. But after a while of seeing his dedication, she finally agreed and they were wedded.
Brock is the oldest of the twins, having a younger sister named Fan, with him being named after their great grandfather.</p>

<p>Due to the One child policy that China had enacted, His mother, Jinhau, being two months pregnant with twins at the time and could pass inspection with the claim of just gaining some weight. They arranged to leave China as quickly as possible, wanting to leave before the first Trimester was over. This was the most dangerous point in time to travel but in the end, it was for the best.</p>

<p>Hiro had arranged for a job back at his home town, where they would stay with their paternal family until Jinhau had given birth to her twins, Fan and Brock.
Being raised in Japan, Brock had some difficulties learning Japanese as he had always heard and understood Chinese much better. even though he was born in Japan, Chinese came easier to him, thus he was having a hard time learning Japanese. It was tough for him to adapt fully to it and eventually, he was sent back to China to live with his Maternal grandparents. Being as old as they were, they still needed help to take care of him until he could do it himself.
After several years of being apart, Brock finally returned home to visit. He couldn't do it often, however, as his studies prevented much traveling but he always made time for at least one trip a year with around a month of time to stay with him. Due to the loss of his grandfather, he would ask a friend to keep watch over his grandmother every time he made a visit to make sure she was safe and kept for. While he was visiting, however, his grandmother fell ill. </p>

<p>Upon hearing the news, Brock and Jinhau returned to the rural town to take care of her, with his father Hiro joining them later on with the excuse of being there for Business.
Fan didn't have any attachments to their grandmother had chosen to stay in Japan to continue her own education. Their father agreed and made sure Fan had enough money to live by herself without worry. It wasn't long until Brock was told the Family Secret by their grandmother, wanting to pass the information to him before the illness took her.
His family on his mothers side were mages, but held no ties to any organisation. They used their magecraft mostly for farming, allowing them to live a more comfortable life than most. It wasn't long before Brock realized what his was. After all, he used it during his studies without really knowing. After their grandmother passed, Brock left his Mother and Father to find Fan once more and fill her in on the details, as well as to show her what he had discovered in hopes that she too had inherited the powers of their Magecraft. Together, they are the Shi Twins and they are ready to save the world.</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">15 High class</font><br>
<font style="float:left"><b>➽Elemental Affinity</b></font>
<font style="float:right">Minerals</font><br>
<font style="float:left"><b>➽Command Seals</b></font>
<font style="float:right">3</font><br>
<font style="float:left"><b>➽Servant</b></font>
<font style="float:right">Carmilla, Tamamo Cat.</font><br>
<font style="float:left"><b>➽Language of Incantations</b></font>
<font style="float:right">English.</font><br>
<font style="float:left"><b>➽Origin</b></font>
<font style="float:right">The Achilles Aegis</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="https://roleplay.chat/profile.php?user=Blood+Countess" target="_blank" title="Carmilla"><img src="https://vignette.wikia.nocookie.net/fategrandorder/images/0/05/Carmilla4.png/revision/latest/scale-to-width-down/350?cb=20170208164855" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=Berserker+Cat " target="_blank" title="Cat!"><img src="https://s3.zerochan.net/Berserker.%28Tamamo.Cat%29.240.2232725.jpg" 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> IC Does not equal OOC.<br>
<b>02.</b> Real life before RP.<br>
<b>03.</b> Smut is earned.<br>
<b>04.</b> Ooc drama should not equate to Ic drama.<br>
<b>05.</b> Fate RP only.<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 Green Bean. Do NOT touch. Please! If you want a copy or want it please ask. She will share. "><img src="https://i.imgur.com/n6pkfKn.png" height="10%"></a>