Silent Reaper (redone)

<style>
@import url('https://fonts.googleapis.com/css?family=Federant|Audiowide|Special+Elite');

body {
background-image: url("https://i.imgur.com/AGjK6LK.png");
**BG from Subtle Patterns**
background-attachment: fixed;
background-position: top;
color: black;
background-color:#c2e4ce;
font-family: "Special Elite";
font-size: 16px;
}

#credit {
Position: fixed; bottom: 10px; left: 10px;
font-family: "Audiowide";
font-size: 14px;
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;
}

#SquarePic{
position: fixed; left: -925px; right: 0px; top: -310px; bottom: 0px; margin: auto;
height: 250px;
border: double black 10px;
background-color: gray;
z-index: 5;
}

#RightPic1{
position: fixed; left: 0px; right: -800px; top: -385px; bottom: 0px; margin: auto;
height: 175px;
border: double black 10px;
background-color: gray;
z-index: 5;
}

#RightPic2{
position: fixed; left: 0px; right: -900px; top: 0px; bottom: 0px; margin: auto;
height: 175px;
border: double black 10px;
background-color: gray;
z-index: 5;
}

#RightPic3{
position: fixed; left: 0px; right: -800px; top: 0px; bottom: -385px; margin: auto;
height: 175px;
border: double black 10px;
background-color: gray;
z-index: 5;
}

#BGBox {
position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
height: 500px;
width: 950px;
border: solid black 5px;
background-color: #6a7481;
background-image: url("https://i.imgur.com/5InWfjW.png");
z-index: 1;
}

#Nav1{
position: fixed; left: -815px; right: 0px; top: 0px; bottom: -10px; margin: auto;
height: 15px;
width: 100px;
border: double black 10px;
background-color: gray;
text-align: center;
font-size: 15px;
line-height: 20px;
color: white;
z-index: 5;
}

#Nav2{
position: fixed; left: -815px; right: 0px; top: 0px; bottom: -98px; margin: auto;
height: 15px;
width: 100px;
border: double black 10px;
background-color: gray;
text-align: center;
font-size: 15px;
line-height: 20px;
color: white;
z-index: 5;
}

#Nav3{
position: fixed; left: -815px; right: 0px; top: 0px; bottom: -186px; margin: auto;
height: 15px;
width: 100px;
border: double black 10px;
background-color: gray;
text-align: center;
font-size: 15px;
line-height: 20px;
color: white;
z-index: 5;
}

#Nav4{
position: fixed; left: -815px; right: 0px; top: 0px; bottom: -274px; margin: auto;
height: 15px;
width: 100px;
border: double black 10px;
background-color: gray;
text-align: center;
font-size: 15px;
line-height: 20px;
color: white;
z-index: 5;
}

#Nav5{
position: fixed; left: -815px; right: 0px; top: 0px; bottom: -362px; margin: auto;
height: 15px;
width: 100px;
border: double black 10px;
background-color: gray;
text-align: center;
font-size: 15px;
line-height: 20px;
color: white;
z-index: 5;
}

#Nav6{
position: fixed; left: -815px; right: 0px; top: 0px; bottom: -450px; margin: auto;
height: 15px;
width: 100px;
border: double black 10px;
background-color: gray;
text-align: center;
font-size: 15px;
line-height: 20px;
color: white;
z-index: 5;
}

#Nav1:hover, #Nav2:hover, #Nav3:hover, #Nav4:hover, #Nav5:hover, #Nav6:hover{
background-color: #536879;
}

#tab{
position: fixed; left: -90px; right: 0px; top: 0px; bottom: 0px; margin: auto;
height: 480px;
width: 520px;
padding: 10px;
background-color: #6a7481;
background-image: url("https://i.imgur.com/5InWfjW.png");
z-index:4;
overflow: auto;
visibility: hidden;
}

#Stats #tab {
visibility: visible;
}

#Stats:target #tab, #Personality:target #tab, #History:target #tab, #Traits:target #tab, #Associates:target #tab, #OOC:target #tab {
visibility: visible;
z-index: 99;
}

.friendpic {
border: 5px solid black;
width: 100px;
height: 100px;
margin: 5px;
pointer-events: auto;
}


a.credit:link {color:#f0f0f0;}
a.credit:visited {color:#f0f0f0;}
a.credit:hover {color:#6f52be;}
a.credit {text-decoration:none;}

b {color:#36454f;}

a.credit:link {color:#f0f0f0;}
a.credit:visited {color:#f0f0f0;}
a.credit:hover {color:#536879;}
a.credit {text-decoration:none;}

h1, h2, h3 {
text-align: center;
}

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

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

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

<img id="SquarePic" src ="http://i.picpar.com/JVld.jpg"></div>
<img id="RightPic1" src ="http://i.picpar.com/JWld.jpg"></div>
<img id="RightPic2" src ="http://i.picpar.com/XVld.jpg"></div>
<img id="RightPic3" src ="http://i.picpar.com/RVld.jpg"></div>

<div id="BGBox"></div>
<a href="#Stats"><div id="Nav1">Stats</div></a>
<a href="#Personality"><div id="Nav2">Personality</div></a>
<a href="#History"><div id="Nav3">History</div></a>
<a href="#Traits"><div id="Nav4">Traits</div></a>
<a href="#Associates"><div id="Nav5">Associates</div></a>
<a href="#OOC"><div id="Nav6">O.O.C.</div></a>

<div id="Stats">
<div id="tab">
<div id="header">
<h1>Stats</h1>
</div>
<div id="box">
<b>Name:</b><font style=float:right>Pandora Crowley </font><br>
<b>Nickname:</b><font style=float:right> Crow and Pan </font><br>
<b>Alias:</b><font style=float:right>Silent Reaper</font><br>
<b>Age:</b><font style=float:right>24 (Look wise) </font><br>
<b>Voice:</b><font style=float:right><a href="https://youtu.be/ny7NZPfl0l4" target="_blank">♥</a></font><br>
<b>Species:</b><font style=float:right>Reaper</font><br>
<b>Status:</b><font style=float:right><a href="Profile here" target="_blank">Single</a></font><br>
<b>Occupation:</b><font style=float:right>Assassin for hire</font><br>
<b>Theme:</b><font style=float:right><a href="https://youtu.be/xz5Mx3a8kRw" target="_blank">♫</a></font><br>
<b>Likes:</b><font style=float:right>Reading, Drawing and Tea</font><br>
<b>Dislikes:</b><font style=float:right>Rape/Force, Incest, Anal, Futa, Candle wax, ECT</font>
</div>
</div></div>

<div id="Personality">
<div id="tab">
<h1>Personality</h1>
Stuborn, Caring, Bitchy, Kind (Certain people)
</div></div>

<div id="History">
<div id="tab">
<h1>History</h1>
Will explain later, very long story
</div></div>

<div id="Traits">
<div id="tab">
<h1>Traits</h1>
Why don't you ask my victims?
</div></div>

<div id="Associates">
<div id="tab">
<h1>Associates</h1>
<center>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="friendpic" title="DESCRIPTION OF FRIEND HERE"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="friendpic" title="DESCRIPTION OF FRIEND HERE"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="friendpic" title="DESCRIPTION OF FRIEND HERE"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="friendpic" title="DESCRIPTION OF FRIEND HERE"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="friendpic" title="DESCRIPTION OF FRIEND HERE"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="friendpic" title="DESCRIPTION OF FRIEND HERE"></a>
</center>
</div></div>

<div id="OOC">
<div id="tab">
<h1>Out of Character</h1>
<b>01.</b> Dont force me things I dont like. <br>
<b>02.</b> Dont be afraid to say hello. <br>
<b>03.</b> Ic =/= OOC <br>
<b>04.</b> SEX IS EARNED!!! <br>
<b>05.</b> OSTORY BEFORE SMUT!!!<br>
<b>06.</b> DO NOT start with a post, you will be ignored. <br>
<b>07.</b> : Happily married IRL. Dont try to hit on me. <br>
<b>08.</b> Don't ask for personal info if I haven't gotten to know you yet, or the other exception is damn good rp<br>
<b>09.</b> Picture art isn't mine, will be removed if asked.<br>
</div></div>

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