Balfour

<style>

@import url('https://fonts.googleapis.com/css?family=Aldrich|Amatica+SC|Press+Start+2P');

::-webkit-scrollbar {width: 0.3vw; height: 0.3vh;}
::-webkit-scrollbar-track {border-radius: 0px; background: transparent;}
::-webkit-scrollbar-thumb {border-radius: 0px; background: #8c1e3b;}

body{
 overflow: hidden;
 background: url('http://i.picpar.com/S2oc.gif');
 background-size: cover;
}

#sheet {
 position: absolute;
 height: 97.7%;
 width: 98.7%;
 background: rgba(246,155,255,0.2);
 border-radius: 10px;
 z-index: -1;
}

img {
 user-drag: none;
 user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -webkit-user-select: none;
 -webkit-user-drag: none;
}

h1 {
 font-family: 'Press Start 2P';
 font-size: 2.5vh;
 color: rgba(96,255,131,0.9);
 text-transform: uppercase;
}

#nav {
 position: fixed;
 height: 60.7%;
 width: 15%;
 left: 2%;
 bottom: 0%;
 top: 20%;
 border-radius: 10px;
 background: rgba(0,0,0,0.6);
}

a.fam {
 display: block;
 text-transform: uppercase;
 font-family: 'Press Start 2P';
 font-size: 2.5vh;
 padding: 30px;
 color: rgba(96, 255, 131, 0.5);
 border-radius: 10px;
 text-decoration: none;
 transition-duration: 1s;
}

a.fam:hover {
 background: rgba(0,0,0,0.7);
 color: rgba(96, 255, 131, 1);
 transition-duration: 1s;
}

@keyframes error{
 from{opacity:0.7;font-size: 2.3vh;}
 to{opacity:1;}
}

@-webkit-keyframes error{
 from{opacity:0.7;font-size:2.3vh;}
 to{opacity:1;}
}

a.bam {
 display: block;
 text-transform: uppercase;
 font-family: 'Press Start 2P';
 font-size: 2.5vh;
 padding: 30px;
 color: rgba(255,66,66, 0.5);
 border-radius: 10px;
 text-decoration: none;
 transition-duration: 1s;
 animation: error 0.5s 1;
 -webkit-animation: error 0.5s 1;
 animation-iteration-count: infinite;
 animation-direction: alternate;
}

a.bam:hover {
 background: rgba(0,0,0,0.7);
 color: rgba(255,66,66,1);
 transition-duration: 1s;
}

.nav {
 list-style-type: none;
 margin: 0;
 padding: 0;
 background: transparent;
 height: 100%;
 width: 100%;
}

#content {
 position: fixed;
 height: 100%;
 width: 50%;
 background: transparent;
 left: 18%;
 top: 0%;
 bottom: 0%;
}

#box {
 position: absolute;
 overflow: auto;
 height: 75%;
 width: 100%;
 background: rgba(0,0,0,0.7);
 top: 10%;
 border-radius: 10px;
 padding: 15px;
 font-family: 'Aldrich';
 font-size: 3vh;
 color: rgba(96,255,131,0.9);
 opacity: 1;
 transition-duration: 1s;
}

#picnav {
 position: fixed;
 height: 5%;
 width: 20%;
 background: rgba(0,0,0,0.5);
 top: 79%;
 left: 74%;
 border-radius: 10px;
 padding: 5px;
 opacity: 1;
 transition-duration: 1s;
}

.blink {
 text-decoration: underline;
 float: left;
 animation: blink 0.5s 1;
 -webkit-animation: blink 0.5s 1;
 animation-iteration-count: infinite;
 animation-direction: alternate;
}

@keyframes blink{
 from{opacity:0;}
 to{opacity:1;}
}

@-webkit-keyframes blink{
 from{opacity:0;}
 to{opacity:1;}
}

.r {float:right;}

a {
 font-family: 'Press Start 2P';
 font-size: 2vh;
 color: rgba(96,255,131,0.6);
 transition-duration: 1s;
}

a:hover {
 color: rgba(96,255,131,0.9);
 transition-duration: 1s;
}

#six {
 position: fixed;
 height: 65%;
 width: 25%;
 background: transparent;
 top: 10%;
 left: 71.5%;
 border-radius: 10px;
 border: 10px inset;
 border-color: rgba(0,0,0,0.5);
 transition-duration: 1.5s;
}

#host1, #host2 {
height: 100%;
width: 100%;
overflow:hidden;
}

#pic1, #pic2, #pic3, #pic4, #one, #two, #three, #four, #five {
height: 100%;
width: 100%;
}

#pic1:target, #pic2:target, #pic3:target, #pic4:target, #one:target, #two:target, #three:target, #four:target, #five:target {
animation: appear 0.5s 1;
-webkit-animation: appear 0.5s 1;
}

#box:target {
opacity: 0;
transition-duration: 1s;
}

@keyframes appear{
from {opacity:0;}
to{opacity:1;}
}

@-webkit-keyframes appear{
from{opacity:0;}
to{opacity:1;}
}


/* Edit as you will but please don't remove the credit */

 #credit {
position:fixed;
padding:5px;
font-family:Aldrich;
background:rgba(0,0,0,0.5);
font-size: 2vh;
bottom: 5%;
left:2%;
color: rgba(96, 255, 131, 0.5);
border-left: 5px solid;
border-color:rgba(255,66,66,0.5);
}

 a.cred {
font-size: 1.2vh;
animation:blink 2s 1;
-webkit-animation: blink 2s 1;
animation-iteration-count:infinite;
animation-direction:alternate;
text-decoration:none;
}

a.cred:hover{
color: rgba(255,66,66,0.5);
}


</style>
<div id="sheet"></div>
<div id="nav">
 <ul class="nav">
 <a href="#one" class="fam"><center>Stats</center></a><br>
 <a href="#two" class="fam"><center>Bio</center></a><br>
 <a href="#three" class="fam"><center>Connect</center></a>
 <a href="#four" class="fam"><center>OOC</center></a>
 <a href="#five" class="bam"><center>Error</center></a>
 </ul>
</div>
<div id="content">
<div id="box">
<div id="host1">
 <div id="one">
 <center><h1>Stats</h1></center><br><br>
 Name <div class="r">Balfour</div><br><br>
 Moniker <div class="r">Goat</div><br><br>
 Location <div class="r"> The club</div><br><br>
 Species <div class ="r">Satyr</div><br><br>
 Gender <div class="r">All Male</div><br><br>
Interest <div class="r">This <a target="_blank" href="https://roleplay.chat/profile.php?user=Ossia"> DOE </a> </div><br><br>
 Height <div class="r">6'7"</div><br><br>
 Hair <div class="r">Black</div><br><br>
 Eyes <div class="r">Varies</div><br><br>
 </div>
 <div id="two">
 <center><h1>Biography</h1></center><br><br>
 <div class="blink">></div>Work in Progress
 </div>
 <div id="three">
 <center><h1>Connections</h1></center><br><br>
 <div class="blink">></div>Friends, Acqauintances and other connections go here.
 </div>
 <div id="four">
 <center><h1>Out of character</h1></center><br><br>
 <div class="blink">></div>In room approach is your best bet.<br>
 <div class="blink">></div>What I do IC does not reflect on me OOC.<br>
 <div class="blink">></div>LT is adored. Basic knowledge of English is adored as well.<br>
 <div class="blink">></div>I reserve the right to refuse RP.<br>
 <div class="blink">></div>Being a dick to me means I get to be rude to you.<br>
 <div class="blink">></div>Quality over quantity just like story over smut.<br>
 <br><br>
 Color: #FF4B23
 </div>
 <div id="five">
 There was an error connecting to this page.<br>
 .<br>.<br>Attempting to reconnect.<br>.<br>.
 <br>Connection failed.<br>.<br>.<br>
 Please <a href="#box">restart</a>
 <br><br><br>
 </div>
</div>
</div>
</div>
<div id="picnav">
 <div class="picnav">
 <br>
 <center>
 <a href="#pic1">1</a> - <a href="#pic2">2</a> - <a href="#pic3">3</a> - <a href="#pic4">4</a></center>
 </div>
</div>
<div id="six">
<div id="host2">
 <div id="pic1">
 <img src="http://i.picpar.com/N2oc.jpg" style="height:100%;width:100%">
 </div>
 <div id="pic2">
 <img src="http://i.picpar.com/P2oc.jpg" style="height:100%;width:100%">
 </div>
 <div id="pic3">
 <img src="http://i.picpar.com/Q2oc.jpg" style="height:100%;width:100%">
 </div>
 <div id="pic4">
 <img src="http://i.picpar.com/R2oc.jpg" style="height:100%;width:100%">
 </div>
</div>
</div>

<div id="credit"> © <a target="_blank" href="https://roleplay.chat/profile.php?user=Elsie" class="cred">Elle.</a> Get the code <a target="_blank" href="http://pastebin.com/A9V0KHt4" class="cred">here.</a></div>