<link href='https://fonts.googleapis.com/css?family=Allura' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<style>
::-webkit-scrollbar {width: 3px;}
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey; border-radius: 10px;}
::-webkit-scrollbar-thumb {background: -webkit-linear-gradient(#FF0000, #000); border-radius: 10px;}

::selection {background-color: white;}
::-moz-selection {background-color: white;}
::-o-selection {background-color: white;}
::-ms-selection {background-color: white;}
::-webkit-selection {background-color: white;}

body {background-image: url(https://downloadwallpaper.org/wp-content/uploads/2017/08/Striped-Texture-wallpaper-wp38010559.jpg); background-color: E8BEBA; background-size: 3px;}
#box {position: fixed; top: 270px; left: 300px; width: 500px; height: 200px; background-image: url(https://thumbs.gfycat.com/BewitchedEsteemedFrenchbulldog-small.gif); background-size: cover; background-position: top center; border: 10px #000 solid; -webkit-filter: grayscale(60%); filter: grayscale(60%);}

#border {position: absolute; top: -6px; left: -6px; width: 508px; height: 208px; border: 2px #777 solid;}

#image {position: fixed; top: 5px; left: 531px; width: 370px; height: 550px; background-image: url(https://i.imgur.com/4hVIMLD.png); background-size: cover; z-index: 5;}

.container {position: fixed; top: 280px; left: 310px; width: 500px; height: 200px; background-color: #444; opacity: 0; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; overflow: hidden; font-family: Montserrat; font-size: 11px; color: white; line-height: 10px;}
body:hover .container {opacity: 0.8;}

#box1 {position: absolute; top: 13px; left: 180px; padding: 4px; width: 119px; height: 162px; background-color: #222; border: 2px #777 solid; line-height: 12px; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; overflow: auto; opacity: 0;}

body:hover #box1 {left: 20px; transition-delay: 2s; opacity: 1;}

#box2 {position: absolute; top: 13px; right: 180px; padding: 4px; width: 119px; height: 162px; background-color: #222; border: 2px #777 solid; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; overflow: auto; opacity: 0;}

body:hover #box2 {right: 20px; transition-delay: 3s; opacity: 1;}

#box3 {position: absolute; top: -210px; left: 172px; padding: 2px; width: 151px; height: 200px; background-color: #000; border-width: 0px 2px; border-color: #890404; border-style: solid; background-image: url(https://i.imgur.com/KNprVCo.gif); background-size: 130px; background-repeat:no-repeat;background-position: center; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; overflow: auto;}
body:hover #box3 {top: -2px; transition-delay: 0.5s}

#name {position: fixed; top: 175px; left: 290px; width: 100px; height: 50px; font-family: Allura; color: black; font-size: 120px; text-shadow: 0px 0px 10px #FF0000; pointer-events: none;}


</style>


<div id="image">
</div>

<div id="box">
<div id="border">
</div>
</div>

<div class="container">
<div id="box1">

<center>melrose<br><br>
twenty-five<br><br>
♀ <br><br>
<strike>high priced whore</strike><br><br>
escort<br><br>
commitment issues<br><br>
heterosexual

</center>

</div>

<div id="box2">
【ooc】---<br><br>
» pm friendly-ish. semi picky.<br>
» Smut/Story Friendly.<br>
» 3rd person. Mirror post.<br>
» don't ask for outside contact.<br>
» have a profile/basic info.<br>
» art is not mine.<br>
» ic ≠ ooc.<br>
» shitpost - para+. <br>
» melrose is bitchy.


</div>

<div id="box3">

</div>

</div>


</body>

<div id="name">
Melrose
</div>
</body>
</html>