Another file to help on...

<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: #000001; background-image: url(https://static1.e621.net/data/cd/22/cd2259da59ca11222a8f47e807f9bede.png);
background-attachment: fixed;
background-position:Left;
background-repeat: no-repeat;
background-size: 100%;
}

#sheet{
 position:fixed;
 height:100%;
 width:100%;
 top:0%;
 bottom:0%;
 left:0%;
 right:0%;
 background-color: black;
 background:radial-gradient( rgba(0,0, 0, 0.3) 60%, #690000);
 background:-webkit-radial-gradient( rgba(144, 81, 65, 0.6) 55%, #000);
 background:-moz-radial-gradient( rgba(0, 0, 0, 0) 40%, #000);
}



#i{
width:700px;
height: 250px;
background:black;
padding:10px;
border:10px solid #1227FF;-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:#FFF;
letter-spacing:3px;
text-shadow:1px 1px 1px rgba(0,0,0,0.5);
line-height: 24px;
}

 .right{
position:absolute;
top:-32px;
left:330px;
font-family:'Great Vibes';
font-size:45px;
font-style:italic;
color:#fFF;
letter-spacing:10px;
text-shadow:1px 1px 1px rgba(0,0,0,0.5);
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:#666;
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:#f11b00;
-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: #978ca9;
font-size:26px;
line-height:27px;
padding: 0px 3px 0px 0px;
}

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

i{
color:#978ca9;
font-style:italic;
}

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

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

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

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

.effect{
height:450px;
Width:250px;
background-image: url(https://s-media-cache-ak0.pinimg.com/564x/d4/aa/b2/d4aab2cb0d378ababffbd3812b4607cd.jpg);
backgorund-repeat; no repeat;
background-size: cover;
border:10px solid #00D2E3;
-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://lh3.googleusercontent.com/-wTt-mpeZOd0/V4EV8bEETtI/AAAAAAAAAQw/mOjr5IZ8CKISZk_ATclStDKPejd1rkzTg/w359-h604-p/Ydkpvl1GXOg.jpg);
background-size: cover;
border:10px solid #2E2E2E;
-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: #00D2E3}
::-webkit-scrollbar-thumb:horizontal {
height: 10px;background-color: #690000;border: 0px ;width: 15px;}

#editthis{ position:fixed;height: 55px;width: 55px; Bottom:220; left:320; 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: #f11b00;
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://k003.kiwi6.com/hotlink/rk8juoj3wt/Clint_Eastwood.mp3"></audio>

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

<div class="gone">DICKS!</div>

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



<b style="letter-spacing:6px;font-size:8px; color:#f11b00;">Age:</b> 17 | <b style="letter-spacing:6px;font-size:8px; color:#f11b00;">Height:</b> 5'6 | <b style="letter-spacing:6px;font-size:8px; color:#f11b00;">Eyes:</b>Ice Blue| <b style="letter-spacing:6px;font-size:8px; color:#f11b00;">Hair: </b> Dark Black with blue stripes| <b style="letter-spacing:6px;font-size:8px; color:#f11b00;">Breed: </b> Pussy~ <b style="letter-spacing:6px;font-size:8px; color:#f11b00;">Orientation:</b> Bi (Fem lean) | <b style="letter-spacing:6px;font-size:8px; color:#f11b00;">Status:</b> <a href="https://roleplay.chat/profile.php?user=Lord+Prometheus" target="_blank">Taken</a>| <br><br>

<I> <br><center> <b style="letter-spacing:6px;font-size:10px; color:#f11b00;"><u>"Life ripples out like the water of a pond, how far the ripples go and what they touch we truly never know."</b></u>"</I><p></font></center>

<b style="letter-spacing:6px;font-size:8px; color:#f11b00;">Mistress:</b> Owner of none, <i>Want to be my pet?</i>
</div></div>

<div id="OOC" 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>OOC</center></div><p>

<b style="letter-spacing:6px;font-size:10px; color:#f11b00;"></b> PM Friendly <br>
<b style="letter-spacing:6px;font-size:13px; color:#f11b00;"></b> No smut starting posts<br>
<b style="letter-spacing:6px;font-size:13px; color:#f11b00;"></b> Story starting posts are okay as long as
they establish the setting <br>
<b style="letter-spacing:6px;font-size:13px; color:#f11b00;"></b> I will not play a character of your choice.<br>
<b style="letter-spacing:6px;font-size:13px; color:#f11b00;"></b> I will ignore pure smut.<br>
<b style="letter-spacing:6px;font-size:13px; color:#f11b00;"></b>You have been warned.
<b style="letter-spacing:6px;font-size:13px; color:#f11b00;"></b> Send me a ♥ if you've read this. Otherwise, you will just be pointed here.
No ♥ no response.<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 Favored</u></center>
<br><br>
<center>
<a target="_blank" href="https://roleplay.chat/profile.php?user=Lord+Prometheus" target="_blank"><img src="https://s-media-cache-ak0.pinimg.com/originals/f7/17/88/f7178851ac4e8b26f372297b06de9b37.jpg" height="50" width="50" title="The guy who helped make this..." 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>
<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:#f11b00;letter-spacing:3px;text-shadow:1px 1px 1px rgba(0,0,0,0.5);"><center>Gallery</center></div><p>

<img src="http://68.media.tumblr.com/328ade7db5d344816d771568b71a5ba9/tumblr_ntyb3esoK71sf1787o8_1280.png" height="100" width="100" title="" border="1">
<img src="http://68.media.tumblr.com/3a689bb706fa57a16a23128c43fd2a1d/tumblr_n69ogwqRHM1sh56xlo8_1280.jpg" height="100" width="100" title="" border="1">
<img src="https://cdnio.luscious.net/376/lusciousnet_a2ac0d26f4dee4606235223_1636987171.jpg" height="100" width="100" title="" border="1">
<img src="https://img.rule34.xxx//images/1570/500c10a0920cbdc4d472512d0e4614b7ea3ff6d5.png" height="100" width="100" title="" border="1">
<img src="https://s-media-cache-ak0.pinimg.com/736x/6a/2d/e3/6a2de39db1be57d120e77970c8e02544.jpg" height="100" width="100" title="" border="1">
<img src="http://x.imagefapusercontent.com/u/SluttySkunky/5133408/984514478/sexyfur_1406763456_fivel_ychkisha.png" height="100" width="100" title="" border="1">
<img src="https://lh3.googleusercontent.com/-7DkbPUhNfR0/V7creP2zgOI/AAAAAAAABLQ/Z1lso-KV57odtuVvGpIeo72010PHQEMtwCL0B/w692-h389-n-no/8bbbec52-698a-4531-92bb-4fd2794dbb5c" 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(IMG HERE);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:#f11b00;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:#f11b00;height:16px;width:220px;padding-left:3px;">Deviant</div></div>
<div style="background:#eee;height:16px;line-height:16px;margin:0 0 5px 0;"><div style="background:#f11b00;height:16px;width:220px;padding-left:3px;">Lustful</div></div>
<div style="background:#eee;height:16px;line-height:16px;margin:0 0 5px 0;"><div style="background:#f11b00;height:16px;width:220px;padding-left:3px;">Mischievous</div></div>
<div style="background:#eee;height:16px;line-height:16px;margin:0 0 5px 0;"><div style="background:#f11b00;height:16px;width:100px;padding-left:3px;">Dominant</div></div>
<div style="background:#eee;height:16px;line-height:16px;"><div style="background:#f11b00;height:16px;width:220px;padding-left:3px;">Submissive</div></div>

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

<b style="letter-spacing:6px;font-size:8px; color:#f11b00;">ADD ME</b> - INFO<br>
<b style="letter-spacing:6px;font-size:8px; color:#f11b00;">ADD ME</b> - INFO<br>
<b style="letter-spacing:6px;font-size:8px; color:#f11b00;">ADD ME </b> - INFO </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>

//


/* */