Char

<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:#FFFFFF;}
 ::-webkit-scrollbar-track{border-radius:0;background:transparent;}

 body {
 background-image: url('http://cdn.wallpapersafari.com/11/76/DdQn9c.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: 1%;
 text-align: center;
 font-family: 'Great Vibes';
 font-size: 7vh;
 transition-duration: 1s;
 }

 #quote2 {
 position: absolute;
 height: 70%;
 width: 30%;
 right: 5%;
 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:#690000;
 top: 15%;
 right: 40%;
 transition-duration: 1.5s;
 opacity: 0;
 font-family: 'Amatic SC';
 color:#ffffff;
 padding: 5px;
 font-size: 3.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:#690000;
 top: 15%;
 right: 25%;
 transition-duration: 1.5s;
 font-family: 'Amatic SC';
 opacity: 0;
 font-size: 4.7vh;
 padding: 5px;
 }

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

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

 #center:hover #img {
 right: 90%;
 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:#690000;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:#000000;
 border: 2px solid;
 border-color:#690000;
 opacity: 0;
 transition-duration: 1s;
 }

 #nav2 {
 position: absolute;
 height: 10%;
 width: 80%;
 top: 50%;
 background:#000000;
 border: 2px solid;
 border-color:#690000;
 opacity: 0;
 transition-duration: 1s;
 }

 #nav3 {
 position: absolute;
 height: 10%;
 width: 80%;
 top: 80%;
 background:#000000;
 border: 2px solid;
 border-color:#690000;
 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:#690000;
 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>Who do you think you are?</font><br></center></div>
 <div id="quote2"><center><br><br><br><br><font color=White>Trying to get my Attention!</font><br></center></div>
 <div id="img"><img src="http://i.imgur.com/hScZm3a.png" style="height: 100%;"></div>
 <div id="box1">
 <center><h1>Masters</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>
 <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:4vh;">
 <b><Font color=#DE0000>Name:</font></b><div class="r">Chariot</div><br>
 <b><Font color=#DE0000>Moniker:</font></b><div class="r">Char</div><br>
 <b><Font color=#DE0000>Gender:</font></b><div class="r">Female</div><br>
 <b><Font color=#DE0000>Age:</font></b><div class="r">19 y.o.</div><br>
 <b><Font color=#DE0000>Species:</font></b><div class="r">Demon</div><br>
 <b><Font color=#DE0000>Height:</font></b><div class="r">5'6</div><br>
 <b><Font color=#DE0000>Marital Status:</font></b><div class="r">Single</div><br>
 <b><Font color=#DE0000>Orientation:</font></b><div class="r">Straight</div><br>






 </font>
 </div>
 <div id="bio">
 <center><h1>Biography</h1></center>
 Work.In.Progress<br>
<center> <h1><u> Gallery</u></h1> </center>
<center></a><img src="https://i.imgur.com/nLYgiNd.jpg" title="..." style="width:100px;height:140px;border:1px solid #690000;border-radius:10px;float: center;"></a>
 <img src="https://s-media-cache-ak0.pinimg.com/736x/a7/65/5a/a7655a351b686ecd3c340989c3546cf1.jpg" title="...." style="width:100px;height:140px;border:1px solid #690000;border-radius:10px;float: center;"></a>
<img src="https://s-media-cache-ak0.pinimg.com/736x/82/96/9a/82969a577f78208459099135e09be144.jpg" title="..." style="width:100px;height:140px;border:1px solid #690000;border-radius:10px;float: center;"></a>
<img src="https://s-media-cache-ak0.pinimg.com/736x/19/68/9f/19689f4a6ab5f5c0ff2390e184a236a7.jpg" title="..." style="width:100px;height:140px;border:1px solid #690000;border-radius:10px;float: center;"></a>
<br>
 <img src="http://img1.thatpervert.com/pics/post/full/m-da-s-tarou-chariot-%28brs%29-Black-Rock-Shooter-vocaloid-2340981.jpeg" title="" style="width:100px;height:140px;border:1px solid #690000;border-radius:10px;float: center;"></a>
 <img src="https://cdnio.luscious.net/550/lusciousnet_ecc37b48c9b6f970358f2bc_973619778.315x0.jpg" title="..." style="width:100px;height:140px;border:1px solid #690000;border-radius:10px;float: center;"></a>
 <img src="http://img1.thatpervert.com/pics/post/full/Chariot-%28Black-Rock-Shooter%29-Black-Rock-Shooter-vocaloid-Anime-2925735.jpeg" title="...." style="width:100px;height:140px;border:1px solid #690000;border-radius:10px;float: center;"></a>
<br>
</a><img src="http://img0.thatpervert.com/pics/post/full/Black-Rock-Shooter-vocaloid-Anime-Chariot-%28Black-Rock-Shooter%29-3384398.jpeg" title="..." style="width:100px;height:140px;border:1px solid #690000;border-radius:10px;float: center;"></a>
 <img src="http://otakixus.net/blog/wp-content/uploads/2014/06/yande.re-289502-black_rock_shooter-chariot-fishnets-rogia-thighhighs-vocaloid.jpg" title="..." style="width:100px;height:140px;border:1px solid #690000;border-radius:10px;float: center;"></a>
<img src="http://img1.thatpervert.com/pics/post/full/hentai---Oral-hentai-2371653.jpeg" title="..." style="width:100px;height:140px;border:1px solid #690000;border-radius:10px;float: center;"></a>
<img src="http://img0.pornreactor.cc/pics/post/full/%D0%A5%D0%B5%D0%BD%D1%82%D0%B0%D0%B9-%D1%81%D0%B5%D0%BA%D1%80%D0%B5%D1%82%D0%BD%D1%8B%D0%B5-%D1%80%D0%B0%D0%B7%D0%B4%D0%B5%D0%BB%D1%8B-Fellatio-%D0%A5%D0%B5%D0%BD%D1%82%D0%B0%D0%B9-Oral-%D0%A5%D0%B5%D0%BD%D1%82%D0%B0%D0%B9-2371650.jpeg" title="..." style="width:100px;height:140px;border:1px solid #690000;border-radius:10px;float: center;"></a>
<br>
</center>
 </div>
 <div id="ooc">
 <font style="font-size:3vh;">
 <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>
 <b>♔</b> No Drama, I will not tolerate Drama.<br>
 <b>♔</b> If you approach me be polite, Rude responses will get you blocked.<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>