Aoi Hana

<style>
@import 'https://fonts.googleapis.com/css?family=Pacifico|Dancing+script|Oswald:700';
@import url(https://fonts.googleapis.com/css?family=Great+Vibes);


body { background-color: #000; background-image: url(https://prettyuglylittleliar.net/uploads/monthly_2016_07/blososm.jpg.babaa370e713784da24d676c0bc25623.jpg);
background-attachment: fixed;
background-position:Left;
background-repeat: no-repeat;
background-size: Cover;
}

#sheet{
 position:fixed;
 height:100%;
 width:100%;
 top:0%;
 bottom:0%;
 left:0%;
 right:0%;
 background-color: ;

}



#i{
width:700px;
height: 250px;
background:black;
padding:10px;
border:10px solid #779ECB;-webkit-box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2);box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2);
border-radius: 100px 100px 100px 100px;
}

 .can{
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}


 .find{
position:absolute;
right:-75px;
bottom:-90px;
background-size: 350px:
margin-top:0px;
}

 .the{
position: absolute;
bottom:-38px;
width: 430px;
margin:auto;
left:0; right:0;
font-family:'Great Vibes';
font-size:20px;
font-style:italic;
color:#966FD6;
letter-spacing:3px;
text-shadow:1px 1px 1px rgba(0,0,0,0.5);
line-height: 24px;
}

 .right{
position:absolute;
top:-32px;
left:270px;
font-family:'Great Vibes';
font-size:45px;
font-style:italic;
color:#000;
letter-spacing:10px;
text-shadow:1px 1px 1px rgba(0,0,0,0.5) #FFF;
line-height: 4px;
}

 .words{
position:absolute;
top:10px;
left:88px;
width:430px;
height:240px;
overflow:hidden;
z-index:20;
}

 .to{
width:430px;
height:240px;
overflow:auto;
}

 .tell{
color:#966FD6;
font-size:10px;
text-align:justify;
line-height:14px;
font-family:monospace;
letter-spacing:.8px;
margin: 5px;
}

 .you{
position:absolute;
margin:auto;
top:0; bottom:0;
width:60px;
height:30px;
left:20px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

a.dream:link, a.dream:active, a.dream:visited{
display: block;
float: left;
width: 18px;
height:18px;
margin: 1px;
background-color:#F49AC2;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
}

a.dream:hover{
transform: rotate(360deg);
background-color:#4e3f64;
box-shadow: 0px 0px 5px #999;
}


big{
font-family:'Pacifico', cursive;
font-style:italic;
color: #F49AC2;
font-size:26px;
line-height:27px;
padding: 0px 3px 0px 0px;
}

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

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

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

a:active, a:link, a:visited{
color:#F49AC2;
text-decoration:none;
}

a:hover{
cursor:help;
color:#F49AC2;
text-decoration:line-through;
}

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

.effect{
height:450px;
Width:250px;
background-image: url(https://s-media-cache-ak0.pinimg.com/564x/d3/f5/dc/d3f5dc4c08515d81bc92cef295e895b4.jpg);
backgorund-repeat; no repeat;
background-size: cover;
border:10px solid #F49AC2;
-webkit-box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2);box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2);
border-radius:100px;
-webkit-transition: all 1.6s ease-out;
-moz-transition: all 1.6s ease-out;
}

.effect:hover{
border-radius:100px;
height:450px;
Width:250px;
background-image: url(https://s-media-cache-ak0.pinimg.com/736x/28/d3/38/28d338adbf67ef1f5a89156c1f34262c.jpg);
background-size: cover;
border:10px solid #F49AC2;
-webkit-box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2);box-shadow:2px 2px 5px 0 rgba(0,0,0,0.2);
border-radius:100px;
-webkit-transition: all 1.6s ease-out;
-moz-transition: all 1.6s ease-out;
transform: rotate(360deg);}


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

#editthis{ position:fixed;height: 55px;width: 55px; Bottom:220; left:350; Top: 440; margin: auto; z-index:99; }

#music1{ position:fixed; padding:0px; -webkit-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out;}

#music1:hover #music2{ opacity:0; margin-top:0px; z-index:-1; transform: rotate(360deg);}

#music1:hover #music3{ opacity:0.7; margin-top:0px; z-index:-99;}

#music1:hover #musiclist{ opacity:1;}

#music2{ opacity:1;
background-color: #F49AC2;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
padding:3px;
width: 18px;
height:18px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);}

#music3{ opacity:0; position:fixed; background-color:#f11b00; background-image: url('http://assets.clickmotive.com/Designs/LEMidnight/playButton.png'); background-repeat: no-repeat; background-size: 25px; border:1px dotted #a9d3d4; width:25px; height:25px; z-index:99 margin-left:0px; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;}

</style>

<div id="sheet"><div>
<div id="i" class="can">
<div id="bar"></div>
<div id="bar2"></div>
<div id="bar3"></div>

<div class="find"><div class="effect"></div></div>
<div class="the">
<div id="editthis"><div id="music1"><div id="music2">
<img src="http://38.media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif" style="opacity: 0.8; transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);"></div>

<div id="music3"><Div style="margin-top:0px;">

<audio controls style="opacity: 0;"><source src="http://tinyurl.com/hl63gea"></audio>

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


</div><div class="right">Aoi Hana</div>
<div class="words">
<div id="basics" class="to"><div class="tell"><p>
<b style="letter-spacing:6px;font-size:8px; color:#F49AC2;">About the Character</b><br>
<i><font color= white><font size=3></font> </i><br>



<font color=#F49AC2>Age:</font> 16 |<font color=#F49AC2> Height:</font> 4'2|<font color=#F49AC2> Eyes:</font>Crimson/Violet| <font color=#F49AC2>Hair:</font> Light Purple| <font color=#F49AC2>Species</font>:Bunny/Vampire |<font color=#F49AC2>Orientation:</font> Straight (Male Only) | <font color=#F49AC2>Status:</font> Un-owned | <br><br>

<I>"I am my mothers daughter but let me warn you when it comes to my mother you should be cautious cause my mother would have no issues tearing anyone apart whom would harm her daughter" But on the other hand even I know how to handle myself make things better on myself.</b></u>"</I><p></font></center>

<b style="letter-spacing:6px;font-size:8px; color:#FFF;">Sin Within:</b> I am the sin that no one knows <i>the sin of Innocence.</i>
</div></div>

<div id="OOC" class="to"><div class="tell">
<div style="font-family:Dancing Script;font-size:15px;font-style:italic;color:#F49AC2;letter-spacing:3px;text-shadow:1px 1px 1px rgba(0,0,0,0.5);"><center>OOC</center></div><p>

<font color="#F49AC2">❃</font>I will not tolerate drama, racism, sexism, homophobia, or anything of the sorts.
<br>
<font color="#F49AC2">❃</font>Do NOT ask about my personal life unless I decided to tell you any aspects.
<br>
<font color="#F49AC2">❃</font>You will only get my Skype or Kik if i fully trust you.
 <br>
<font color="#F49AC2">❃</font>Credit to the artists who's art is featured on this profile. None of these pictures belong to me, and if the artist want me to take them down, I will do so. Though, the character belongs to me, please do not steal/copyright this character.<br>
<font color="#F49AC2">❃</font>Hex: B57EFF
<br>
<font color="#F49AC2">❃</font>My Mother will beat you down and hurt you if you hurt me<p>



</div></div>
<div id="Friends" class="to"><div class="tell">

<div style="font-family:Dancing Script;font-size:15px;font-style:italic;color:#f11b00;letter-spacing:3px;text-shadow:1px 1px 1px rgba(0,0,0,0.5);"><center>Friends</center></div>

<center><u>The Loved</u></center>
<br><br>
<center>
<a target="_blank" href="https://roleplay.chat/profile.php?user=LilKinkyBunny" target="_blank"><img src="https://s-media-cache-ak0.pinimg.com/564x/7c/9c/c9/7c9cc9c6c0922d9fbfca0c178fe0cfb0.jpg" height="50" width="50" title="My Mother LilKinkyBunny" border="1"></a>
<a href="https://roleplay.chat/profile.php?user=Endaris" target="_blank"><img src="https://s-media-cache-ak0.pinimg.com/originals/e5/60/ac/e560ac4d37c5cd42281fea46ee58ab14.jpg" height="50" width="50" title="Mommah's Mate Endaris" border="1"></a>
<a href="" target="_blank"><img src="IMG HERE" height="50" width="50" title="..." border="1"></a>
<a href="" target="_blank"><img src="IMG HERE" height="50" width="50" title="..." border="1"></a>
<br><br>
<a target="_blank" href="" target="_blank"><img src="" height="50" width="50" title="..." border="1"></a>
<a target="_blank" href="" target="_blank"><img src="" height="50" width="50" title="...." border="1"></a>
<a target="_blank" href="" target="_blank"><img src="" height="50" width="50" title="..." border="1"></a>
<a href="" target="_blank"><img src="*" height="50" width="50" title="" border="1"></a>
</center>



</div></div>
<div id="Gallery" class="to"><div class="tell">

<div style="font-family:Dancing Script;font-size:15px;font-style:italic;color:#F49AC2;letter-spacing:3px;text-shadow:1px 1px 1px rgba(0,0,0,0.5);"><center>Gallery</center></div><p>

<img src="https://s-media-cache-ak0.pinimg.com/736x/28/d3/38/28d338adbf67ef1f5a89156c1f34262c.jpg" height="100" width="100" title="" border="1">
<img src="https://s-media-cache-ak0.pinimg.com/736x/ae/e6/df/aee6df22953da2c4e69345e4a71659ba.jpg" height="100" width="100" title="" border="1">
<img src="http://scontent.cdninstagram.com/t51.2885-15/s480x480/e15/11137726_440870336088065_1233590575_n.jpg?ig_cache_key=OTY2NzkxNzY3OTI3NDQ0MzE1.2" height="100" width="100" title="" border="1">
<img src="http://pre00.deviantart.net/3007/th/pre/f/2016/036/e/2/kawaii_bunny_girl__render__by_lolitapastelgoth-d9qkumq.png" height="100" width="100" title="" border="1">
<img src="http://ind5.ccio.co/C6/KF/c7/603ad8bc6fad6ba42e7528e9f752abf1.jpg" height="100" width="100" title="" border="1">
<img src="https://68.media.tumblr.com/23eab09bf63e3dd123f7141a7e71e970/tumblr_o7uvn9uNJ81ukx56so1_500.jpg" height="100" width="100" title="" border="1">
<img src="https://pbs.twimg.com/media/CinVNurU4AILudu.jpg:large" height="100" width="100" title="" border="1">








</div></div>
<div id="Personality" class="to"><div class="tell">
<div style="width:120px;height:120px;background:url(https://s-media-cache-ak0.pinimg.com/736x/28/d3/38/28d338adbf67ef1f5a89156c1f34262c.jpg);background-size:100%;display:inline-block;overflow:hidden;text-align:center;color:#fff;line-height:120px;font-size:18px;margin:0 2px 0 0;">



</div>

<div style="width:215px;height:120px;display:inline-block;overflow:hidden;font-size:7px;letter-spacing:3px;color:#fff;"><div style="font-family:Dancing Script;font-size:20px;font-style:italic;color:#F49AC2;text-shadow:1px 1px 1px rgba(0,0,0,0.5);margin-top:3px;">Personality</div><p>

<div style="background:#eee;height:16px;line-height:16px;margin:0 0 5px 0;"><div style="background:#F49AC2;height:16px;width:220px;padding-left:3px;">Loving</div></div>
<div style="background:#eee;height:16px;line-height:16px;margin:0 0 5px 0;"><div style="background:#F49AC2;height:16px;width:220px;padding-left:3px;">Trusting</div></div>
<div style="background:#eee;height:16px;line-height:16px;margin:0 0 5px 0;"><div style="background:#F49AC2;height:16px;width:220px;padding-left:3px;">Caring</div></div>
<div style="background:#eee;height:16px;line-height:16px;margin:0 0 5px 0;"><div style="background:#F49AC2;height:16px;width:220px;padding-left:3px;">Understanding</div></div>
<div style="background:#eee;height:16px;line-height:16px;">
<div style="background:#F49AC2;height:16px;width:220px;padding-left:3px;">Submissive</div></div>

</div>
<div style="font-family:Dancing Script;font-size:20px;font-style:italic;color:#F49AC2;letter-spacing:3px;text-shadow:1px 1px 1px rgba(0,0,0,0.5); text-align:center;">Acceptable rps</div><p>

<b style="letter-spacing:6px;font-size:8px; color:#F49AC2;">Smut</b> - Only Those I deem Fit<br>
<b style="letter-spacing:6px;font-size:8px; color:#F49AC2;">Long Term</b> - Debates on the Story<br>
<b style="letter-spacing:6px;font-size:8px; color:#F49AC2;">Short Term</b> - Depends on your Attitude </a> )




</div></div></div>
<div class="you">
<a href="#basics" class="dream"></a>
<a href="#OOC" class="dream"></a>
<a href="#Friends" class="dream"></a>
<a href="#Gallery" class="dream"></a>
<a href="#Personality" class="dream"></a>
<a href="#Basics" class="dream"></a>
</div></div>