Deku-chan

<style>
@import 'https://fonts.googleapis.com/css?family=Pacifico|Oswald:700';
@import url(https://fonts.googleapis.com/css?family=Rammetto+One);
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

/*
PLEASE DO NOT REMOVE THIS CREDIT
DO NOT REMOVE THE CREDIT AT THE BOTTOM EITHER!
CREATOR: GREEN BEAN
There is a Javascript at the base that prevents right click. Do not remove it.
*/



body {
 background: #e3eded;
 background-image: url("https://i.imgur.com/CndER2B.jpg");
 background-repeat: No-repeat;
 background-size: 100% 100%;
 background-position: bottom right;
}


 .tobe{
position:absolute;
top: 4%;
left: 15%;
width:420px;
height:250px;
overflow:hidden;
z-index:20;
}

 .far{
width: 420px;
height:250px;
overflow:auto;
}

 .tell{
color:#fff8d1;
font-size:14px;
text-align:justify;
line-height:14px;
font-family:'Indie Flower', cursive;
letter-spacing:0.3px;
margin: 5px;
}
a.gone:link, a.gone:active, a.gone:visited{
font-family: 'Indie Flower', cursive;
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: #141F42;
font-weight:bold;
letter-spacing: 1px;
}

i{
color:#99CCB9;
font-style:italic;
}

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

a:active, a:link, a:visited{
color:#fff;
text-decoration:underline;
}

a:hover{
cursor:all-scroll;
color:#F77481;
text-decoration:line-through;
}

h1 {
 font-family:'Rammetto One', cursive;
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;}



#sheen{
width: 560px;
height: 330px;
background: #01826C;
border-radius: 40px 50px 50px 50px;
z-index: 4;
}


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

}





 .navi{
position: absolute;
bottom: 10px;
left: 20%;
width: 400px;
margin:auto;
right: 0px;
z-index:99;
 animation: emerald 3s 1;
 -webkit-animation: emerald 3s 1;
}
 #credit {
position: fixed;
bottom: 20px;
right: 20px;
background-color: transparent;
 animation: emerald 3s 1;
 -webkit-animation: emerald 3s 1;
}

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

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

.ahero {
pointer-events:none;
position: absolute;
bottom: 0px;
left: 100px;
width: 309px;
height: 550px;
background: url(https://i.imgur.com/BFv5j37.png);
background-size: 100%;
background-repeat: no-repeat;
z-index: 5;
animation: emerald 3s 1;
-webkit-animation: emerald 3s 1;
}


.wordy{
position:absolute;
z-index:4;
height:14%;
width:35%;
top:15%;
left:24%;
font-family: 'Rammetto One', cursive;
font-size: 4.5vw;
color:#FFF;
background-image:url(https://i.imgur.com/PRqysGd.gif);
background-size:100%;
background-repeat:no-repeat;
background-position:center;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #99CCB9;
-ms-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
 animation: emerald 3s 1;
 -webkit-animation: emerald 3s 1;
}

</style>

<div id="sheen" class="KABOOM">
<div class="navi">
<a href="#strike" class="gone"><img src="https://i.imgur.com/gbEfJ1p.png" width="50px"></a>
 <a href="#your" class="gone"><font size="24">✦</font></a>
<a href="#hardest" class="gone"><img src="https://i.imgur.com/nszMQ60.png" width=50px"></a>
 <a href="#with" class="gone"><font size="24">✦</font></a>
<a href="#allmight" class="gone"><img src="https://i.imgur.com/tjsWTBu.png" width="50px"></a></div>

<div class="tobe">

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

<h1>Tab 1</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><Br><br>

<b>BOLD</b> <i>ITALICS</i> <Strike>STRIKE</Strike>  <a  href="" target="_blank" title="link stuff.">LINK</a>
</div></div>
<div id="your" class="far"><div class="tell">
<h1>Tab 2</h1><br>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel sapien odio. Maecenas tincidunt lacus tempus commodo vehicula. Sed dignissim vulputate lorem vel eleifend. Curabitur laoreet vitae diam quis auctor. Aliquam laoreet at nulla quis pellentesque. Ut pharetra rhoncus efficitur. Proin non elementum erat, tristique ultricies sem. Vestibulum et orci sem. Donec ut velit neque. Pellentesque bibendum auctor urna sit amet semper. Quisque auctor sed libero a malesuada. Donec efficitur malesuada tincidunt. Suspendisse feugiat turpis ut ornare pretium.</p>

<p>Pellentesque tincidunt, orci sed sagittis suscipit, erat dui consequat ligula, vitae posuere enim quam nec velit. Quisque at ex et orci finibus semper. Aenean iaculis, tortor eu ultrices sollicitudin, leo sapien sagittis enim, nec commodo diam quam vel magna. Nulla facilisi. Nunc vitae cursus est, quis aliquet justo. Aenean erat lacus, elementum sit amet aliquam eget, sodales nec risus. Donec odio est, feugiat et gravida non, imperdiet ac eros. Aenean ligula turpis, volutpat vel ex nec, fringilla sollicitudin purus. Quisque consectetur sapien et tincidunt efficitur. Aenean ultrices iaculis ipsum, fringilla suscipit ante euismod et. Praesent placerat ante metus, et aliquet mauris feugiat ac. Nullam in ante consequat ex congue ultrices. Etiam eget iaculis libero. Proin ac tempus lectus. Nam volutpat porttitor congue.</p>

<p>Vivamus sed rutrum nisl. Fusce rutrum eros non risus cursus porta. Vivamus quis bibendum enim. Maecenas semper finibus consequat. Mauris id augue eget turpis blandit porta. Morbi bibendum mollis convallis. Sed congue, ligula eget feugiat sagittis, felis risus ultrices est, quis venenatis turpis neque a mi. Praesent at porta diam. Pellentesque luctus ante sed sodales ultricies.</p>

<p>Phasellus pharetra leo sed justo sodales tristique congue nec nisl. Sed eu purus ac nulla vestibulum finibus in vitae leo. Pellentesque ornare iaculis vestibulum. Phasellus ultrices ut tortor ac dictum. Nam venenatis tempor mauris. Phasellus at rutrum mi, quis lobortis lorem. Integer imperdiet, magna a bibendum dapibus, erat purus convallis libero, ac dapibus diam neque quis mi.</p>

<p>Etiam at quam in turpis mollis aliquam. Donec rutrum consequat mi. Aliquam ultrices tempus porttitor. Cras lobortis massa eget blandit ultrices. Donec risus lacus, facilisis fermentum dui eget, rutrum tristique justo. Duis feugiat felis ut nibh egestas mollis. Sed pellentesque, nisi et finibus volutpat, orci metus molestie mi, sodales finibus ex odio vel elit. Curabitur nec eros vitae quam gravida luctus id vitae justo. Donec elementum dolor mi, eu accumsan ante laoreet ac.</p>

</div></div>
<div id="hardest" class="far"><div class="tell">
<h1>Tab3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut iaculis dolor. Maecenas finibus mauris ipsum, ac posuere elit blandit sit amet. In posuere rhoncus massa. Vivamus diam odio, vulputate eleifend ultrices at, dignissim vitae ligula. Morbi bibendum dui quis nibh feugiat accumsan. Integer non finibus tortor, id volutpat nisi. Ut lectus massa, condimentum sit amet quam nec, efficitur consectetur orci. Morbi ipsum ex, vestibulum id eros non, volutpat sodales dui. Sed rhoncus ac nulla eget consectetur. Integer consectetur maximus augue. Ut consectetur varius massa nec tempor. Integer nec neque commodo, sollicitudin nisl vitae, tincidunt arcu.</p>

<p>Maecenas non mauris dapibus, lacinia sapien tempus, lacinia nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce interdum pellentesque sem, quis molestie ipsum accumsan quis. Duis sit amet interdum velit. Quisque volutpat blandit odio at gravida. Phasellus eu orci at est venenatis lobortis eu ut urna. Aliquam nisi purus, posuere et vehicula ac, consequat ut justo. Mauris tellus mi, convallis sit amet nunc sed, interdum condimentum nisi. Praesent in tellus neque. Aliquam tempor leo in magna ornare gravida. Nulla dictum purus non lacus ultricies, eu facilisis quam maximus.</p>
</div></div>

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

<h1>Tab 4</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum varius libero dui, sit amet viverra lorem tristique vitae. Duis et lobortis tellus. Cras volutpat, est ac feugiat ullamcorper, urna lectus blandit augue, et tincidunt urna velit sed augue. Donec pellentesque aliquam feugiat. Vestibulum cursus ipsum turpis, eu porta libero ornare in. Cras egestas quam vel ex cursus, sit amet aliquam libero lobortis. Aenean quis laoreet eros, quis tristique nisi. Sed in est sit amet ipsum sagittis rhoncus. Donec sagittis dolor orci.</p>

<p>Duis ac egestas enim, sit amet malesuada augue. Duis id velit tortor. Donec felis velit, ultricies nec mauris sed, rhoncus placerat lacus. Nunc hendrerit mi vel mi pellentesque, sit amet ultrices enim facilisis. Vivamus id elit bibendum, molestie ligula eu, sollicitudin augue. Maecenas id elit auctor, fermentum risus non, porttitor nisl. Aliquam ultricies, odio ut pretium tincidunt, nibh est tempor sapien, tincidunt tincidunt dolor purus elementum sapien. Nulla pretium luctus tincidunt. Duis vitae varius ipsum. Mauris luctus ornare magna id pretium.</p>

<p>Ut venenatis ex et viverra euismod. Praesent rhoncus sapien nec luctus lobortis. Integer rutrum posuere consectetur. Cras tincidunt vestibulum tempor. Duis eu mi felis. Phasellus efficitur orci ut magna interdum, ac porta turpis luctus. In commodo, justo a sagittis laoreet, quam orci tincidunt neque, sed imperdiet purus quam vitae nisi. Donec eu ligula nec massa vestibulum aliquam. Quisque rhoncus turpis ut dui vehicula, at lobortis mauris suscipit. Ut maximus tortor libero, ac maximus neque pretium eu. Ut porttitor sodales nulla id vehicula. Donec consectetur velit eu lacinia ultricies. Maecenas non ante eu dolor posuere ultrices vel eget erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>


</div></div>

<div id="allmight" class="far"><div class="tell">
<h1>Rules</h1>
OOC
</div></div></div>
 </div></div></div></div></div>
<div class="ahero">
</div>

 <div class="wordy">
Deku-chan
</div>


</div>
<div id="credit">
<a 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>