Rumor

<style>

@font-face{
 font-family:'headerfont';
 src:url(https://dl.dropboxusercontent.com/u/4556289/NOsferatu.TTF);
}

@font-face{
 font-family: 'bodyfont';
 src:url(https://dl.dropboxusercontent.com/u/4556289/JaspersHandwriting.ttf);
}


body{
 background: #2f2429;
 background-image:url(https://puu.sh/tqgpp/1070cdc649.png);
 overflow: hidden;
}


::-webkit-scrollbar {
 width: 2px;
 background-color: transparent;
}


::-webkit-scrollbar-thumb {
 border-radius: 0px;
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
 box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
 background-color: #E3B956;
}


#whole{
 position: fixed;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background-image:url(http://i.imgur.com/LGkJTJp.png);
background-image:url(https://puu.sh/tC28S/893f27ae8b.png);
 background-repeat: no-repeat;
 background-size: auto 130%;
 background-position: top 10% left 5%;
}

#rightshift{
position: absolute;
top: 0px;
left: 5%;
right: 0px;
bottom: 0px;}

#containerarea, #containerarea2, #containerarea3{
 position: absolute;
 left: -5%;
 right: 0px;
 top: 100px;
 bottom: 0px;
 margin: auto;
 height: 50px;
 width: 330px;
 border-radius: 5px;
 box-shadow: 0px 0px 3px gray;
}

#containerarea:before{
 content:'';
 position: absolute;
 top: -5px;
 left: -5px;
 right: -5px;
 bottom: -5px;
 background: black;
 z-index: -1;
 opacity: .7;
 border-radius: 3px;
}

#contentarea{
 position: absolute;
 top: 0px;
 left: 0px;
 bottom: 0px;
 right: -10px;
 font-family:'bodyfont';
 font-size: 17pt;
 color: gray;
 font-weight: 600p;
 letter-spacing: -1px;
 padding: 10px;
 text-align: left;
}

#containerarea #contentarea b,
#containerarea2 #contentarea b{
 font-family:'headerfont';
 font-size: 20pt;
 color: #48313C;
 letter-spacing: 3px;
 box-sizing: border-box;
 padding: 5px;
 font-style: italic;
}

#containerarea{
 height: 60px;
 -webkit-transition: all 1s 6s;
 transition: all 1s 6s;
}

#containerarea2{
 box-shadow: 0px 0px 0px;
 height: 160px;
 top: 80px;
 border-radius: 0px;
 -webkit-transition: all 1s 5s;
 transition: all 1s 5s;
 opacity: 0;
 left: 600px;
}

#containerarea2 #contentarea,
#containerarea3 #contentarea{
 padding-left: 20px;
 padding-right: 20px;
 -webkit-transition: overflow 1s 5s;
 transition: overflow 1s 5s;
 overflow: hidden;
 font-size: 14pt;
}

#containerarea2 #contentarea b,
#containerarea3 #contentarea b{
 color: #48313C;
 font-weight: 800;
}

#containerarea2 #contentarea b{
 font-style: italic;
 font-weight: 600;
 font-size: 12pt;
 letter-spacing: 0px;
}

#containerarea3{
 box-shadow: 0px 0px 0px;
 border-radius: 0px;
 top: 400px;
 height: 150px;
 -webkit-transition: all 1s 5s;
 transition: all 1s 5s;
 opacity: 0;
 left: -600px;
}

#dividerdiv{
 position: absolute;
 height: 1px;
 width: 310px;
 box-shadow: 0px 0px 3px gray;
 top: 0px;
 left: 0px;
 right: 0px;
 margin: auto;
}

#whole:hover #containerarea{
 -webkit-transition: all 2s;
 transition: all 2s;
 height: 300px;
}

#whole:hover #containerarea2,
#whole:hover #containerarea3{
 -webkit-transition: all 2s, opacity 1s .7s;
 transition: all 2s, opacity 1s .7s;
 opacity: 1;
 left: -5%;
}

#whole:hover #containerarea2 #contentarea{
 -webkit-transition: overflow 1s 2s;
 transition: overflow 1s 2s;
 overflow: auto;
}

#containerarea2 #contentarea{
 top: 5px;
 padding-top: 0px;
}

#musicbarcover{
 opacity: 0;
 -webkit-transition: all 1s 5s;
 transition: all 1s 5s;
}

#musicbar{
 position: absolute;
 left: 205px;
 top: 142px;
 -webkit-transform: rotate(90deg);
 transform:rotate(90deg);
 height: 15px;
 width: 300px;
 background: #1B0911;
 opacity: .3;
 box-shadow: 0px 0px 7px #E3B956;
 z-index: 1;
 border-radius: 2px;
 -webkit-transition: all .2s;
 transition: all .2s;
overflow: hidden;
}

#whole:hover #musicbarcover{
 -webkit-transition: all 1s 2s;
 transition: all 1s 2s;
 opacity: 1;
}

#musicbar:hover{
 -webkit-transition: all .3s !important;
 transition: all .3s !important;
 opacity: .7;
}

#musicbar:active{
box-shadow: 0px 0px 7px black;}

#musicbar audio{
 zoom: 1000%;
 opacity: 0;
 margin-top: -13px;
 margin-left: -2px;
}

#musicmarquee{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 border: 0px solid red;
 z-index: -1;
 text-align: center;
 color: gray;
 font-family: 'headerfont', Times, Arial;
 font-size: 10pt;
 box-sizing: border-box;
 padding-top: 0px;
}

#contentarea a{
text-decoration: none;
color: #E3B956;}


</style>

<div id="whole">

<div id="rightshift">

 <div id="containerarea">

 <div id="musicbarcover">
 <div id="musicbar" title="The xx - Dangerous">
 <div id="musicmarquee">
 <marquee direction="left" scrollamount="3">

 THE XX / DANGEROUS / I SEE YOU (2017)
 </marquee>
 </div>
 <audio controls src="http://k003.kiwi6.com/hotlink/a0vxh74nd4/The_xx_DangerousVOL.mp3
" loop=3>
 </audio>
 </div>
 </div>



 <div id="contentarea">
 <b>Rumor </b>› maligned bakeneko
 </div>
 </div>

 <div id="containerarea2">
 <div id="dividerdiv">
 </div>
 <div id="contentarea">
 the creature stood at a total height of <b>seven feet, three inches</b> › his build one that seemed to alter between <b>heavy</b> or <b>lithe</b> almost whimsically › while no defined proof of a given sex existed at all times, he was most certainly <b>male</b> › and with an inclination towards <b>random sexual behaviors</b> › alongside a <b>pansexual</b> sexual orientation › where he travels, <b>chaos</b> might sometimes follow › there is <b>no sure pattern</b> to his personality.
 </div>
 </div>

 <div id="containerarea3">
 <div id="dividerdiv">
 </div>
 <div id="contentarea">
 <b>do</b> message me, ask questions<br>
 <b>do not</b> be an asshole
 </div>
 </div>

</div>