Ayaya Mio

<style>
/*
INVISIBLE CREDIT; PLEASE DON'T REMOVE

Author: Elle
Text type: CSS/HTML
*/
 @import url('https://fonts.googleapis.com/css?family=Amatic+SC|Great+Vibes|Pacifico|Satisfy|Dancing+Script');

 ::-webkit-scrollbar{width:0.3vh;height:0.3vh;}
 ::-webkit-scrollbar-thumb{border-radius:0;background:#0413FF;}
 ::-webkit-scrollbar-track{border-radius:0;background:transparent;}

 body {
 background-image: url('https://s-media-cache-ak0.pinimg.com/736x/b0/25/98/b025982a05292f34a80f7f8a75436648.jpg');
 }

 #sheet {
 position: fixed;
 height: 100%;
 width: 100%;
 top: 0%;
 bottom: 0%;
 left: 0%;
 right: 0%;
 background: rgba(0,0,0,0.15);
 }

/* Amatic SC = information ; Great Vibes = quotes ; Pacifico = h1? ; Satisy = links probs */

 #center {
 position: fixed;
 height: 90%;
 width: 100%;
 left: 0%;
 top: 5%;
 background: transparent;
 }

 #quote1 {
 position: absolute;
 height: 70%;
 width: 30%;
 left: 2%;
 text-align: center;
 font-family: 'Great Vibes';
 font-size: 7vh;
 transition-duration: 1s;
 }

 #quote2 {
 position: absolute;
 height: 70%;
 width: 30%;
 right: 2%;
 text-align: center;
 font-family: 'Great Vibes';
 font-size: 7vh;
 transition-duration: 1s;
 }

 #center:hover #quote1, #center:hover #quote2 {
 opacity: 0;
 transition-duration: 1s;
 }

 #box1 {
 position: absolute;
 background: rgba(0,0,0,0.6);
 height: 70%;
 width: 20%;
 border-radius: 5%;
 border: 2px solid;
 border-color:#0413FF;
 top: 15%;
 right: 40%;
 transition-duration: 1.5s;
 opacity: 0;
 font-family: 'Amatic SC';
 color:#ffffff;
 padding: 5px;
 font-size: 2.5vh;
 overflow: auto;
 }

 #center:hover #box1 {
 opacity: 1;
 right: 1%;
 transition-duration: 1.5s;
 }

 #box2 {
 position: absolute;
 background: rgba(0,0,0,0.6);
 height: 70%;
 width: 50%;
 border-radius: 5%;
 border: 2px solid;
 border-color:#0413FF;
 top: 15%;
 right: 25%;
 transition-duration: 1.5s;
 font-family: 'Amatic SC';
 opacity: 0;
 font-size: 2.7vh;
 padding: 5px;
 }

 #center:hover #box2 {
 opacity: 1;
 transition-duration: 1.5s;
 }

 #img {
 position: absolute;
 height: 120%;
 width: 15%;
 top: -6%;
 right: 52%;
 transition-duration: 1.5s;
 background: transparent;
 }

 #center:hover #img {
 right: 92%;
 transition-duration: 1.5s;
 }

 #host{height:100%;width:100%;overflow:hidden;}

 #stats, #bio, #ooc {height:100%;width:100%;overflow:auto;color:#fff;}

 h1{font-family:'Dancing Script';font-size:4vh;text-decoration:underline;}

 a{font-family:'Satisfy';text-decoration:none;color:#0413FF;transition-duration:1s;}

 a:hover{font-size:110%;transition-duration:1s;}

 .r{float:right;}

 b{color:#ffffff;}

 #navigation {
 position: absolute;
 height: 40%;
 width: 2.5%;
 background: transparent;
 right: 22%;
 top: 30%;
 }

 #nav1 {
 position: absolute;
 height: 10%;
 width: 80%;
 top: 20%;
 background:rgba(255, 255, 255, 0.5);
 border: 3px solid;
 border-color:#0413FF;
 opacity: 0;
 transition-duration: 1s;
 }

 #nav2 {
 position: absolute;
 height: 10%;
 width: 80%;
 top: 50%;
 background:rgba(255, 255, 255, 0.5);
 border: 3px solid;
 border-color: #0413FF;
 opacity: 0;
 transition-duration: 1s;
 }

 #nav3 {
 position: absolute;
 height: 10%;
 width: 80%;
 top: 80%;
 background:rgba(255, 255, 255, 0.5);
 border: 3px solid;
 border-color:#0413FF;
 opacity: 0;
 transition-duration: 1s;
 }

 #center:hover #nav1, #center:hover #nav2, #center:hover #nav3{opacity:1;transition-duration: 0.5s;}

 #nav1:hover, #nav2:hover, #nav3:hover{
 border-radius: 100%;
 transition-duration: 0.5s;
 transform: rotate(360deg);
 border-color:#0B63FF;
 background:#000000;
 }

 /* Credit. please don't remove! */

 #credit {
 position: absolute;
 background: rgba(0,0,0,0.4);
 border-left: rgBAD255,255,255);
 font-family: 'Amatic SC';
 font-size: 2.3vh;
 padding: 3px;
 bottom: 5%;
 left: 3%;
 }

</style>
<div id="sheet"></div>
<div id="center">
 <div id="quote1"><center><br><br><br><br><font color=White>Ayaya tries to be a sweet kitty</font><br></center></div>
 <div id="quote2"><center><br><br><br><br><font color=White>But, sometimes the naughty comes out.</font><br></center></div>
 <div id="img"><img src="http://i.imgur.com/zf3KH8J.png" style="height: 100%;"></div>
 <div id="box1">
 <center><h1>Siblings</h1></center>
 <a href="URL HERE">.quad1</a>.None.<br>
 <a href="URL HERE">.quad2</a>.None.<br>
 <a href="URL HERE">.quad3</a>.None.<br>
 <center><h1>Friends</h1></center>
 <a href="URL HERE">.name</a>.info.quote<br>
 <a href="URL HERE">.name</a>.info.quote<br>
 <a href="URL HERE">.name</a>.info.quote<br>
 <a href="URL HERE">.name</a>.info.quote<br>
 <a href="URL HERE">.name</a>.info.quote<br>
 <a href="URL HERE">.name</a>.info.quote<br>
 <a href="URL HERE">.name</a>.info.quote<br>
 <a href="URL HERE">.name</a>.info.quote<br>
 <a href="URL HERE">.name</a>.info.quote<br>
 </div>
 <div id="box2">
 <div id="host">
 <div id="stats">
 <center><h1>Stats</h1></center>
 <font style="font-size:3vh;">
 <b>Name</b><div class="r">Ayaya Mio</div><br>
 <b>Moniker</b><div class="r">Aya </div><br>
 <b>Gender</b><div class="r">Female</div><br>
 <b>Age</b><div class="r">20 y.o.</div><br>
 <b>Species</b><div class="r">Nekomata </div><br>
 <b>Persona</b><div class="r">very playful, easy going, simple minded, and enjoys teasing people. She is also vulgar, using her beauty and sensuousness as a weapon in her arsenal of teasing</div><br>
 <b>Height</b><div class="r">161 cm. (5 feet 3 inches)</div><br>
 <b>Body Measurements</b><div class="r">[B98-W57-H86 cm]</div><br>
 <b>Marital Status</b><div class="r">Single</div><br>
 <b>Orientation</b><div class="r">Straight</div><br>
 </font>
 </div>
 <div id="bio">
 <center><h1>Biography</h1></center>
 .Work.In.Progress.<br>
<center> <h2><u> Gallery</u></h2> </center>
<center></a><img src="https://s-media-cache-ak0.pinimg.com/736x/06/08/49/0608499c57522e98a37e7eeab5f286c2.jpg" title="..." style="width:100px;height:140px;border:1px solid #FF115E;border-radius:10px;float: center;"></a>
 <img src="http://adn.i.ntere.st/p/17232424/image" title="..." style="width:100px;height:140px;border:1px solid #FF115E;border-radius:10px;float: center;"></a>
<img src="https://s-media-cache-ak0.pinimg.com/236x/a4/2e/16/a42e1618667a49051adccf940711b5cb.jpg" title="..." style="width:100px;height:140px;border:1px solid #FF115E;border-radius:10px;float: center;"></a>
<img src="http://p2.i.ntere.st/c2ef48c9bfd20515dc4ccc3231be9176_480.jpg" title="" style="width:100px;height:140px;border:1px solid #FF115E;border-radius:10px;float: center;"></a>
<br>
 <img src="http://c3.nuttit.com/Cache/GetImage?id=MfRnz3t.jpg" title="" style="width:100px;height:140px;border:1px solid #FF115E;border-radius:10px;float: center;"></a>
 <img src="https://68.media.tumblr.com/ca404d4c24c6de9909f94b13921acaaa/tumblr_o04r1tOLOC1v1y5s8o6_1280.png" title="..." style="width:100px;height:140px;border:1px solid #FF115E;border-radius:10px;float: center;"></a>
 <img src="https://68.media.tumblr.com/4e57646389b1be942e818ccaff9b8863/tumblr_o5e3tvrC9j1vr5bwuo1_1280.jpg" title="...." style="width:100px;height:140px;border:1px solid #FF115E;border-radius:10px;float: center;"></a></center>
 </div>
 <div id="ooc">
 <center><h1>Out Of Character</h1></center>
 <b>ღ</b> In-room approach is your best bet.<br>
 <b>ღ</b> Smut is earned.<br>
 <b>ღ</b> I reserve the right to make you disappear [or ignore you, whichever is convenient].<br>
 <b>ღ</b> I'm actually friendlier than my character.<br>
 <b>ღ</b> PM Picky.<br>
 <b>ღ</b> No profile = immediate no.<br>
 <b>ღ</b> Better be ready to dish what you serve.<br>
 <b>ღ</b> LT is preferred.<br>
 <b>ღ</b> Planned or impromptu. Doesn't matter.<br>
 </div>
 </div>
 </div>
 <div id="navigation">
 <a href="#stats"><div id="nav1"></div></a>
 <a href="#bio"><div id="nav2"></div></a>
 <a href="#ooc"><div id="nav3"></div></a>
 </div>
</div>

<div id="credit">
 © <a href="https://roleplay.chat/profile.php?user=Elsie">Elle.</a> Get the code <a href="http://pastebin.com/92vbJB4m">here.</a><br>
<a href="https://roleplay.chat/profile.php?user=CodeTester">Designed by Adrain(Code made by Elle) </a>
</div>