oin

<style>

@import url('https://fonts.googleapis.com/css?family=Mansalva|Vollkorn+SC|Anton|Marck+Script');

body {
background-color: #070a02;
background-position: center center;
background-repeat: no-repeat;
}

::-webkit-scrollbar {
width: 2px;
}

::-webkit-scrollbar-track {
background-color: transparent;
}

::-webkit-scrollbar-thumb {
background-color: #453B1F;
}

p {
text-indent: 13px;
text-align: justify;
}

i {
color: #FCFFD4;
text-shadow: ;
font-family: mansalva;
font-size: 18px;
line-height: 15px;
}

a, a:visited {
color: #90654B;
transition: all .8s;
font-family: anton;
letter-spacing: 1px;
text-transform: lowercase;
font-size:14px;
line-height: 15px;
text-decoration:none;
}

a:hover {
text-shadow: 0px 1px 3px #000,
0px -1px #000,
1px 0px #000,
-1px 0px #000;
color: #575e2e;
}

	a.mother, a.mother:visited {
		color: #939dba;
		transition: all .7s;
		text-decoration: none;
	}

	a.mother:hover {
		color: #ccc;
	}

b {
font-weight: 900;
color: #e0c069;
}

h1 {
font-family: marck script;
color: #B29F73;
font-size: 30px;
text-align: center;
font-weight: 1;
letter-spacing: -1px;
color: #473820;
text-shadow: -1px 1px 1px #B29C70;
}

h1::first-letter {
font-family: mansalva;
text-transform: uppercase;
font-weight: 1;
}

h2 {
font-family: anton;
font-weight: 1;
letter-spacing: 2px;
border-bottom: 1px solid #A39661;
line-height: 5px;
text-shadow: 0px 2px #312D1A, 2px 0px #312D1A;
color: #917650;
}

#bb {
height: 430px;
width: 100%;
position: fixed;
margin: auto;
bottom: 0px;
right: 0px;
top: 0px;
overflow: hidden;
background-color: #7A592D;
background-image: url('http://i.picpar.com/KQEd.png');
background-blend-mode: multiply;
}

#b {
height: 400px;
width:  100%;
position: fixed;
margin: auto;
top: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
background-color: #302B18;
background-size: fill;
background-position: center;
background-image: url('http://i.picpar.com/JQEd.jpg');
background-repeat: no-repeat;
background-blend-mode: multiply;
box-shadow: 0px 3px 10px, 0px -3px 10px;
}

#main {
height: 360px;
width: 400px;
position: fixed;
margin: auto;
top: 0px;
bottom: 0px;
left: 35px;
overflow: hidden;
background-image: url('http://i.picpar.com/aIEd.jpg');
background-size: 120% 100%;
border: 2px #ccc;
background-repeat: no-repeat;
background-position: center;
box-shadow: 1px 1px 3px, -1px -1px 3px;
opacity: .7;
}

#first {
height: 150px;
width: 420px;
padding: 5px;
position: fixed;
margin: auto;
top: 0px;
bottom: 200px;
left: 0px;
right: 0px;
overflow: hidden;
background-color: rgba(16, 18, 4, .7);
box-shadow: -1px -1px 3px #000, 1px 1px 3px #000;
color: #A39661;
overflow-x: hidden;
overflow-y: scroll;
font-family: vollkorn sc;
line-height: 14px;
font-size: 15px;
letter-spacing: -1px;
}

#second {
height: 150px;
width: 420px;
padding: 5px;
position: fixed;
margin: auto;
top: 200px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: hidden;
background-color: rgba(16, 18, 4, .7);
box-shadow: -1px -1px 3px #000, 1px 1px 3px #000;
color: #A39661;
overflow-x: hidden;
overflow-y: scroll;
font-family: vollkorn sc;
line-height: 14px;
font-size: 15px;
letter-spacing: -1px;
}

#third {
height: 350px;
width: 390px;
padding: 5px;
position: fixed;
margin: auto;
top: 0px;
bottom: 0px;
right: 35px;
overflow: hidden;
background-color: rgba(16, 18, 4, .7);
box-shadow: 1px 1px 3px #000, -1px -1px 3px #000;
color: #A39661;
overflow-x: hidden;
overflow-y: scroll;
font-family: vollkorn sc;
line-height: 14px;
font-size: 15px;
letter-spacing: -1px;
overflow-x: hidden;
overflow-y: scroll;
}

#name {
height: 40px;
width: 400px;
position: fixed;
margin: auto;
top: 0px;
bottom: 450px;
left: 0px;
text-align: right;
padding-right: 10px;
overflow: hidden;
color: #9B7D3D;
font-family: marck script;
font-size: 50px;
line-height: 50px;
letter-spacing: -7px;
text-shadow: -1px -1px #D0B874,
1px 2px #5E441F;
}

#music{
position: fixed;
overflow:hidden;
top:5;
right:13;
width:40;
height:40;
}

#player{
position: fixed;
overflow:hidden;
bottom: 0px;
right:0;
font-size: 15px;
}

</style>

<div id="player"><h1 class="flashit">
<img src="http://i.picpar.com/b5Cd.gif" width="75" style="opacity: .4;"></h1>
</div>

<div id="music">
<div style="opacity:0;">
<audio controls>
<source src="http://k007.kiwi6.com/hotlink/tn28b1yivq/joji_-_slow_dancing_in_the_dark.mp3" type="audio/mpeg"></audio>
</div>
</div>

<div id="bb">
</div>

<div id="b">
</div>

<div id="main">
</div>

<div id="first">

test. is this legible? by god, it is! amazing! let's push this further.<br><br>
<i>italic.</i> <b>bold.</b> <u>under.</u> <a href="" target="_blank">link.</a>
<p>paragraph formatting? who would have thought! ...me. i would have thought, because i did it. i made it happen. i'm fantastic! ...nah, i'm a'ight. </p>
<p>paragraph formatting? who would have thought! ...me. i would have thought, because i did it. i made it happen. i'm fantastic! ...nah, i'm a'ight. this one is a repeat, cause i need to make sure it scrolls. and lookit that, it do!</p>

</div>

<div id="second">

test. is this legible? by god, it is! amazing! let's push this further.<br><br>
<i>italic.</i> <b>bold.</b> <u>under.</u>
<p>paragraph formatting? who would have thought! ...me. i would have thought, because i did it. i made it happen. i'm fantastic! ...nah, i'm a'ight. </p>
<br><br>
you can leave this bit at the bottom of whichever box you use for ooc. c:<br><br>
code provided by: <a href="https://roleplay.chat/profile.php?user=mothership" target="_blank" class="mother">☮</a>

</div>

<div id="third">

<p>another test paragraph cause why not at least make sure it all looks right, right? ye. that's how we do. ...or, i do? i guess.  also this font is all uppers, clearly, but i can change it if you prefer. c:</p>

<h1>header test one</h1>
<h2>header test two</h2>

<p>for decorative/'chapter' divide reasons. at least that'swhy i tend to use the headers. you do you, beebee.</p>

</div>

<div id="name">
Oin the Dude
</div>