<style>
@import url('https://fonts.googleapis.com/css?family=Alex+Brush|Alike|Allan|Audiowide');

body {
background-image: url("https://steamcdn-a.akamaihd.net/steamcommunity/public/images/items/450060/0a3b4a87f8682b1d333c431c2df77678c9ab06da.jpg");
background-attachment: fixed;
background-position: top;
color: black;
background-color:#c2e4ce;
font-family: "Alike";
font-size: 16px;
}

#credit {
Position: fixed; bottom: 10px; left: 10px;
font-family: "Audiowide";
font-size: 14px;
z-index: 99;
text-shadow: 2px 0 0 #4C9DCC, -2px 0 0 #4C9DCC, 0 2px 0 #4C9DCC, 0 -2px 0 #4C9DCC, 1px 1px #4C9DCC, -1px -1px 0 #4C9DCC, 1px -1px 0 #4C9DCC, -1px 1px 0 #4C9DCC;
}

#LeftPic{
position: fixed; left: -940px; right: 0px; top: -240px; bottom: 0px; margin: auto;
height: 200px;
border: solid 10px gray;
z-index: 2;
}

#RightPic{
position: fixed; left: 0px; right: -940px; top: 0px; bottom: -240px; margin: auto;
border: solid 10px black;
height: 200px;
z-index: 2;
}

#FrameTopLeft{
position: fixed; left: -500px; right: 0px; top: -500px; bottom: 0px; margin: auto;
width: 450px;
height: 10px;
background-color: gray;
z-index: 1;
}

#FrameTopRight{
position: fixed; left: 0px; right: -500px; top: -500px; bottom: 0px; margin: auto;
width: 450px;
height: 10px;
background-color: black;
z-index: 1;
}

#FrameLeft{
position: fixed; left: -940px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 10px;
height: 500px;
background-color: gray;
z-index: 1;
}

#FrameRight{
position: fixed; left: 0px; right: -940px; top: 0px; bottom: 0px; margin: auto;
width: 10px;
height: 500px;
background-color: black;
z-index: 1;
}

#FrameBottomLeft{
position: fixed; left: -500px; right: 0px; top: 0px; bottom: -500px; margin: auto;
width: 450px;
height: 10px;
background-color: gray;
z-index: 1;
}

#FrameBottomRight{
position: fixed; left: 0px; right: -500px; top: 0px; bottom: -500px; margin: auto;
width: 450px;
height: 10px;
background-color: black;
z-index: 1;
}

#BoxBG{
position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 420px;
height: 570px;
background-image: linear-gradient(to right, gray , black);
z-index: 2;
}

#Quote {
position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 390px;
height: 540px;
color: black;
z-index: 5;
font-size: 30px;
font-family: "Alex Brush";
background-image: url("https://i.imgur.com/Z7nU0yR.png");
}

#tab {
position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 370px;
height: 520px;
padding: 10px;
background-color: white;
background-image: url("https://i.imgur.com/Z7nU0yR.png");
overflow: auto;
z-index: 15;
display: none;
}
/* Background pattern from Toptal Subtle Patterns */

#Stats:target #tab, #Personality:target #tab, #Abilities:target #tab, #History:target #tab, #OOC:target #tab {
display: block;
z-index: 99;
}

#Navigation {
position: fixed; left: -940px; right: 0px; top: 0px; bottom: -240px; margin: auto;
width: 200px;
padding: 0 100 0 100;
height: 220px;
z-index: 15;
text-align: center;
}

#Friends {
position: fixed; left: 0px; right: -940px; top: -240px; bottom: 0px; margin: auto;
width: 200px;
height: 220px;
padding: 0 100 0 100;
z-index: 15;
text-align: center;
overflow: auto;
}

#NaviBox {
width: 200px;
height: 25px;
background-color: gray;
margin: 0px;
margin-bottom: 14px;
font-size: 20px;
}

#FriendBox {
width: 200px;
height: 25px;
background-color: #696969;
margin: 0px;
margin-bottom: 14px;
font-size: 20px;
}

a.credit:link {color:#f0f0f0; font-family: "Audiowide"; font-size: 16px; text-decoration:none;}
a.credit:visited {color:#f0f0f0;}
a.credit:hover {color:#6f52be;}

a.nav:link {color:#f0f0f0; text-decoration:none; font-family: "Allan";
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;
 }
a.nav:visited {color:#f0f0f0;}
a.nav:hover {color:#0c8dbc;}

a {color: gray; text-decoration:none; font-family: "Allan";
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;
 }
a:visited {color: gray;}
a:hover {color:#0c8dbc;}

b {color: gray;}

h1, h2, h3 {
text-align: center;
font-family: "Allan";
margin: 0px;
padding: 5px;
}

::-webkit-scrollbar {
width: 5px;
height: 1px;
}

::-webkit-scrollbar-track {
border-radius: 5px;
}

::-webkit-scrollbar-thumb {
background: black;
}
</style>
<body>

<div id="FrameTopLeft"></div>
<div id="FrameTopRight"></div>
<div id="FrameLeft"></div>
<div id="FrameRight"></div>
<div id="FrameBottomLeft"></div>
<div id="FrameBottomRight"></div>
<div id="BoxBG"></div>

<div id="Navigation">
<div id="NaviBox"><a class="nav" href="#Stats">Stats</a></div>
<div id="NaviBox"><a class="nav" href="#Personality">Personality</a></div>
<div id="NaviBox"><a class="nav" href="#Abilities">Abilities</a></div>
<div id="NaviBox"><a class="nav" href="#History">History</a></div>
<div id="NaviBox"><a class="nav" href="#OOC">Out of Character</a></div>
<div id="NaviBox"><a class="nav" href="#Back">Back</a></div>
</div>

<div id="Friends">
<div id="FriendBox"><a class="nav" target="_blank" href="https://roleplay.chat/profile.php?user=Crawl" title="FRIENDDESCRIPTIONHERE">Crawl</a></div>
<div id="FriendBox"><a class="nav" target="_blank" href="FRIENDLINKHERE" title="FRIENDDESCRIPTIONHERE">Friend Name</a></div>
<div id="FriendBox"><a class="nav" target="_blank" href="FRIENDLINKHERE" title="FRIENDDESCRIPTIONHERE">Friend Name</a></div>
<div id="FriendBox"><a class="nav" target="_blank" href="FRIENDLINKHERE" title="FRIENDDESCRIPTIONHERE">Friend Name</a></div>
<div id="FriendBox"><a class="nav" target="_blank" href="FRIENDLINKHERE" title="FRIENDDESCRIPTIONHERE">Friend Name</a></div>
<div id="FriendBox"><a class="nav" target="_blank" href="FRIENDLINKHERE" title="FRIENDDESCRIPTIONHERE">Friend Name</a></div>
<div id="FriendBox"><a class="nav" target="_blank" href="FRIENDLINKHERE" title="FRIENDDESCRIPTIONHERE">Friend Name</a></div>
<div id="FriendBox"><a class="nav" target="_blank" href="FRIENDLINKHERE" title="FRIENDDESCRIPTIONHERE">Friend Name</a></div>
<div id="FriendBox"><a class="nav" target="_blank" href="FRIENDLINKHERE" title="FRIENDDESCRIPTIONHERE">Friend Name</a></div>
<div id="FriendBox"><a class="nav" target="_blank" href="FRIENDLINKHERE" title="FRIENDDESCRIPTIONHERE">Friend Name</a></div>
<div id="FriendBox"><a class="nav" target="_blank" href="FRIENDLINKHERE" title="FRIENDDESCRIPTIONHERE">Friend Name</a></div>
</div>

<img id="LeftPic" src="https://vignette.wikia.nocookie.net/satellite-city/images/a/a6/Lucy_Lacemaker-0.png/revision/latest?cb=20190222065202" alt="left picture"></div>
<img id="RightPic" src="https://i.ytimg.com/vi/jbcu9wMX4k8/maxresdefault.jpg" alt="right picture"></div>

<div id="Quote">
<div style="display: table; width: 390px; height: 540px;  overflow: hidden;">
<div style="display: table-cell; vertical-align: middle; text-align: center;">
"Let 'em see how crazy you're not and it's a sign of weakness. It opens the doors to all kinds of sappiness."
</div></div></div>


<div id="Stats">
<div id="tab">
<h1>Stats</h1>
<b>Name:</b><span style=float:right>Charlotte Chanceberry</span><br>
<b>Race:</b><span style=float:right>Monster</span><br>
<b>Gender:</b><span style=float:right>Female</span><br>
<b>Age:</b><span style=float:right>Unknown</span><br>
<b>Eyes:</b><span style=float:right>Red/Silver</span><br>
<b>Hair/fur:</b><span style=float:right>Tan with green spots</span><br>
<b>Body:</b><span style=float:right>Medium sized dog</span><br>
<b>Status:</b><span style=float:right>Single</span>
</div></div>

<div id="Personality">
<div id="tab">
<h1>Personality</h1>
<br>*Brash</br>
<br>*Sarcastic</br>
<br>*Confident</br>
<br>*Unbalanced (crazy)</br>

</div></div>

<div id="Abilities">
<div id="tab">
<h1>Abilities</h1>
<b>Stealth:</b> Silent on her feet.<br>
<b>Color shifting:</b> Fur changes colors. Might blend with her surroundings.<br>
<b>Invisibility:</b> Can turn completely invisible if need be.</br>
<b>On Target:</b> Can hit what she's aiming at with precision.<br>
<b>Rapid healing:</b> Can brush off minor injuries. Major take a bit longer to heal.<br>
<b>Enhanced Strength:</b> Stronger than she looks.<br>
<b>Phasing:</b> Pass through solid objects.<br>
<b>Enhanced senses:</b> Scent, hearing, sight, ect.<br>
<b>Powerful bite:</b> Sharp teeth and jaw strength to crush bone.
</div></div>

<div id="History">
<div id="tab">
<h1>History</h1>
Lorem ipsum...
</div></div>

<div id="OOC">
<div id="tab">
<h1>Out of Character</h1>
<b>01.</b> Char is a WIP.<br>
<b>02.</b> OOC here.<br>
<b>03.</b> OOC here.<br>
<b>04.</b> OOC here.<br>
<b>05.</b> OOC here.
</div></div>

<div id="credit"><a class="credit" href="https://roleplay.chat/profile.php?user=Spaceman+Codes">Spaceman</a></div>
</body>