Notes

<style>
@import url('https://fonts.googleapis.com/css?family=Caveat|Crimson+Text:600|Forum');
::-webkit-scrollbar {width: 0.3vw; height: 0.3vw;}
::-webkit-scrollbar-track { border-radius: 0px; background-color: transparent;}
::-webkit-scrollbar-thumb { border-radius: 0px; background-color: transparent;}

body{
overflow:hidden;
background-image:url('https://s-media-cache-ak0.pinimg.com/originals/cd/3f/a1/cd3fa198b20017636126b1103c6a89ea.jpg');
background-size:cover;
}
img{
user-select:none;
user-drag:none;
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
-webkit-user-drag:none;
}
#sheet{
position:fixed;
height:100%;
width:100%;
top:0%;
bottom:0%;
left:0%;
right:0%;
background: rgba(0,0,0,0.4);
}
#content {
position:fixed;
width: 100%;
height:70%;
background: transparent;
top: 15%;
left: 0%;
transition-duration: 1s;
}

#content:hover {
background: rgba(255,255,255,0.08);
transition-duration: 1s;
}

#content:hover #img1{
opacity: 0;
transition-duration:1s;
}

#content:hover #img2{
opacity:1;
transition-duration: 1s;
animation: bap 6s 1;
-webkit-animation: bap 6s 1;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-delay: 3s;
-webkit-animation-delay: 3s;
}

@keyframes bap{
0%{opacity:1;}
100%{opacity:0}
}

@-webkit-keyframes bap{
0%{opacity:1;}
100%{opacity:0;}
}

#content:hover #img3{
opacity: 0;
transition-duration:1s;
animation: beep 6s 1;
-webkit-animation: beep 6s 1;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-delay: 3s;
-webkit-animation-delay: 3s;
}

@keyframes beep{
0%{opacity:0;}
100%{opacity:1;}
}

@-webkit-keyframes beep{
0%{opacity:0;}
100%{opacity:1;}
}

#img1 {
position: absolute;
height:96%;
width: 25%;
background: transparent;
left: 36.7%;
border: 10px inset;
border-color: rgba(0,0,0,0.4);
border-radius: 10px;
transition-duration: 1s;
}

#img2 {
position: absolute;
height:96%;
width: 25%;
background: transparent;
left: 36.7%;
border: 10px inset;
border-color: rgba(0,0,0,0.4);
border-radius: 10px;
opacity: 0;
transition-duration: 1s;
}

#img3 {
position: absolute;
height:96%;
width: 25%;
background: transparent;
left: 36.7%;
border: 10px inset;
border-color: rgba(0,0,0,0.4);
border-radius: 10px;
opacity: 0;
transition-duration: 1s;
}

#content:hover #navleft{
opacity: 1;
transition-duration: 1s;}

#content:hover #navright{
opacity: 1;
transition-duration: 1s;
}

#content:hover #box1{
opacity: 1;
left: 6%;
transition-duration: 1.5s;
}

#content:hover #box2{
opacity: 1;
right: 6%;
transition-duration: 1.5s;
}

#box1 {
position: absolute;
overflow: auto;
height: 92.5%;
width: 25%;
background: #161616;
border-radius: 10px;
border: 3px solid;
border-color: rgba(255,255,255,0.3);
left: 35%;
padding: 15px;
opacity: 0;
transition-duration: 1s;
font-family: 'Forum';
font-size: 2.8vh;
color: #eee;
}

#box2 {
position: absolute;
overflow: auto;
height: 92.5%;
width: 25%;
background: #161616;
border-radius: 10px;
border: 3px solid;
border-color: rgba(255,255,255,0.3);
right: 35%;
padding: 15px;
opacity: 0;
transition-duration: 1s;
font-family: 'Forum';
font-size: 2.8vh;
color: #eee;
}

#host1, #host2 {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}

#one, #two, #three, #four {
width:100%;
height:100%;
overflow:auto;
}

#one:target, #two:target, #three:target, #four:target {
animation: appear 1.5s 1;
-webkit-animation: appear 1.5s 1;
}

@keyframes appear{
from{opacity:0;}
to{opacity: 1;}
}

@-webkit-keyframes appear{
from{opacity:0;}
to{opacity:1;}
}

#navleft {
position: absolute;
height:100%;
width: 2%;
background: transparent;
left: 33.8%;
opacity: 0;
transition-duration: 1s;
}

#navright {
position: absolute;
height:100%;
width: 2%;
background: transparent;
right: 34.8%;
opacity: 0;
transition-duration: 1s;
}

h1 {
font-family: 'Crimson Text', serif;
font-size: 3.6vh;
color: #9b9b9b;
text-decoration: underline;
}

a {
font-family: 'Caveat', cursive;
color: #9b9b9b;
text-decoration: none;
}

a:hover {color: #eee}

.r {float: right;}

/* PLEASE DON'T REMOVE THE CREDIT :c I worked hard on this, fam */

#credit {
position: fixed;
height: 3%;
width: 15%;
background: rgba(0,0,0,0.4);
border-left: 5px solid;
border-color: rgba(255,255,255,0.5);
font-family: 'Forum', cursive;
font-size: 2vh;
color: #eee;
padding: 5px;
opacity: 0.7;
bottom: 8%;
right: 42%;
}

/*fog effect*/

.clouds {
position:fixed;
left:0%;
bottom:0%;
width:100%;
height:50%;
display:block;
overflow: visible;
pointer-events: none;
opacity: 0.5;
background:transparent url('http://i.imgur.com/nptVSPv.png') repeat top center;
z-index: 1;
-moz-animation:move-scrolling-front 150s linear infinite;
-ms-animation:move-scrolling-front 150s linear infinite;
-o-animation:move-scrolling-front 150s linear infinite;
-webkit-animation:move-scrolling-front 150s linear infinite;
animation:move-scrolling-front 150s linear infinite;
}

@keyframes move-scrolling-front{
from{background-position:0% 0%}
to{background-position:300% 0%}
}
@-webkit-keyframes move-scrolling-front{
from{background-position:0% 0%}
to{background-position:300% 0%}
}
@-moz-keyframes move-scrolling-front{
from{background-position:0% 0%}
to{background-position:300% 0%}
}
@-ms-keyframes move-scrolling-front{
from{background-position:0% 0%}
to{background-position:200% 0%}
}

</style>
<div id="sheet"></div>
<div id="content">
<div id="img1">
<img src="https://s-media-cache-ak0.pinimg.com/564x/d1/ee/2c/d1ee2c517395d360a2bde4588e8e63de.jpg" style="height:100%;width:100%;">
</div>
<div id="img2">
<img src="https://s-media-cache-ak0.pinimg.com/564x/f6/d8/5d/f6d85de579fed08085579c9f8fb7eb3c.jpg" style="height:100%;width:100%">
</div>
<div id="img3">
<img src="https://s-media-cache-ak0.pinimg.com/564x/8c/6b/2d/8c6b2dd3acec6ee2d7c84a9eebc3396b.jpg
" style="height:100%;width:100%">
</div>
<div id="box1">
<div id="host1">
<div id="one">
<center><h1>Stats</h1></center><br><br>
Name <div class="r">Lilith</div><br>
Moniker <div class="r">Elle</div><br>
Title/s <div class="r">First Woman, First Witch</div><br>
Status <div class="r">Demon-Goddess of Eden</div><br>
Age <div class="r">Appears 24</div><br>
Height <div class="r">5'1</div><br>
Weight <div class="r"><i>"Excuse me?"</i></div><br>
Hair <div class="r">Raven</div><br>
Eyes <div class="r">Azure</div><br>
Marital Status <div class="r"><a href="https://roleplay.chat/profile.php?user=King+of+Kowloon">.Taken.</a></div><br>
<br>
<center><a href="https://www.thiscrush.com/~ellethedemoness">Crushing?</a></center>
</div>
<div id="three">
<center>
<a target="_blank" href="profile" target="_blank"><img src="image" height="75" width="75" align="left" border="3"></a>
<center><b>- Name -</b><br> <i>friend/foe/nuetral</i></center> small note.<br><br>
<a target="_blank" href="profile" target="_blank"><img src="image" height="75" width="75" align="left" border="3"></a>
<center><b>- Name -</b><br> <i>friend/foe/nuetral</i></center> small note.<br><br>
<a target="_blank" href="profile" target="_blank"><img src="image" height="75" width="75" align="left" border="3"></a>
<center><b>- Name -</b><br> <i>friend/foe/nuetral</i></center> small note.<br><br>
<a target="_blank" href="profile" target="_blank"><img src="image" height="75" width="75" align="left" border="3"></a>
<center><b>- Name -</b><br> <i>friend/foe/nuetral</i></center> small note.<br><br>
<a target="_blank" href="profile" target="_blank"><img src="image" height="75" width="75" align="left" border="3"></a>
<center><b>- Name -</b><br> <i>friend/foe/nuetral</i></center> small note.<br><br>
<br><br></center>
</div>
</div>
</div>
<div id="navleft">
<br><br><br><br><br><br><br><br>
<a href="#one"><img src="http://i.picpar.com/Csjc.png" style="width:140%;"></a>
<br><br>
<a href="#three"><img src="http://i.picpar.com/Csjc.png" style="width:140%;"></a>
</div>
<div id="navright">
<br><br><br><br><br><br><br><br>
<a href="#two"><img src="http://i.picpar.com/Csjc.png" style="width:140%;"></a>
<br><br>
<a href="#four"><img src="http://i.picpar.com/Csjc.png" style="width:140%;"></a>
</div>
<div id="box2">
<div id="host2">
<div id="two">
<center><h1>Biography</h1></center>
<center>Lilith of Eden is the first woman and the first wife of Adam. Being born from the
Earth and the breath of life from YHWH, she was as headstrong and as willful as the First Man
himself which is why when YHWH asked her to submit to her husband, it was a strong no from her. <br><br>
Discoverer of witchcraft, she used her newfound powers, <i>Shadow Manipulation</i>, she escaped from the Garden
of Eden and disappeared from God's sight. Unbeknowst to the diety, Lilith had consorted with Lucifer himself and
birthed majority of the demons now roaming the different planes of existence.
</center>
</div>
<div id="four">
<center><h1>Out of Character</h1></center>
<font color="#702f2f"><b>☩</b></font> In-room appoach is your best bet.<br>
<font color="#702f2f"><b>☩</b></font> Smut is reserved for partner.<br>
<font color="#702f2f"><b>☩</b></font> What I do IC does not reflect on me OOC.<br>
<font color="#702f2f"><b>☩</b></font> LT is preferred.<br>
<font color="#702f2f"><b>☩</b></font> Quality over quantity like story over smut.<br>
<font color="#702f2f"><b>☩</b></font> Your rudeness will be reflected back to you.<br>
<font color="#702f2f"><b>☩</b></font> I take no shit from anyone. Be prepared for a clapback.<br>
<font color="#702f2f"><b>☩</b></font> Semi-PM friendly.<br>
<center><h1>Typist Info</h1></center>
<font color="#702f2f"><b>☩</b></font> 20 y.o.<br>
<font color="#702f2f"><b>☩</b></font> Femme AF bitch<br>
</div>
</div>
</div>
</div>
<!-- Please don't actually remove this. -->
<div id="credit">
<center>
&copy; <a href="https://roleplay.chat/profile.php?user=Elsie">Elle</a> Get the code <a href="http://pastebin.com/D6h0qNvY">here.</a>
</center>
</div>
<!-- Credit end -->
<div class="clouds"></div>