<style type="text/css">

@import url(https://fonts.googleapis.com/css?family=Arvo);

.pfor {display: none;}
body {background-color: #0C0808;}

#name {
position: fixed;
left: 80%;
bottom: 3%;
height: 6%;
width: 7%;
text-align: center;
font-family: 'Arial', Arial;
font-size: 40px;
color: #813D16;
background-color: transparent;
overflow: hidden;}

#title {
position: fixed;
left: 79%;
bottom: 0%;
height: 5%;
width: 20%;
text-align: center;
font-family: 'Arvo', serif;
font-size: 45px;
color: #813D16;
background-color: transparent;
overflow: hidden;}

#sidebar {
position:absolute;
left: 0%;
bottom: 0%;
height:1%;
width: 78%;
background-color:#AB6239;
border: 3px solid #FFC8AA;
z-index:-1;}

#botimage {
position:absolute;
left: 1%;
bottom:0%;
height: 8%;
width: 4%;
background:url('https://i.imgur.com/5c2HeXD.png');
background-position:bottom;
background-size:100%;
background-color: transparent;
background-repeat:no-repeat;
z-index: 1;
overflow: hidden;}

#botimage1 {
position:absolute;
left: 6%;
bottom:0%;
height: 20%;
width: 7%;
background:url('https://i.imgur.com/2nKuFVe.png');
background-position:bottom;
background-size:100%;
background-color: transparent;
background-repeat:no-repeat;
z-index: 1;
overflow: hidden;}

#botimage2 {
position:absolute;
left: 14%;
bottom:0%;
height: 30%;
width: 13%;
background:url('https://i.imgur.com/ff4ma86.png');
background-position:bottom;
background-size:100%;
background-color: transparent;
background-repeat:no-repeat;
z-index: 1;
overflow: hidden;}

#botimage3 {
position:absolute;
left: 26%;
bottom:0%;
height: 35%;
width: 14%;
background:url('https://i.imgur.com/nCC1DhW.png');
background-position:bottom;
background-size:100%;
background-color: transparent;
background-repeat:no-repeat;
z-index: 1;
overflow: hidden;}

#botimage4 {
position:absolute;
left: 40%;
bottom:5%;
height: 100%;
width: 60%;
opacity: 50%;
background:url('https://i.imgur.com/IBTXymg.png');
background-position:bottom;
background-size:100%;
background-color: transparent;
background-repeat:no-repeat;
z-index: 1;
overflow: hidden;}

.detail { background-color: #817F7F;
width: 400px;
height:300px;
left: 0%;
bottom:0%;
opacity: 0;
overflow: auto;
padding: 5px;
position: fixed;
pointer-events: none;
font-family: 'Arvo', serif;
color:#FFC8AA;
line-height:18px;
font-size: 14px;}

 .detail:target {width: 400px;
height:300px;
left: 11%;
bottom:50%;
opacity: 1;
pointer-events: auto;
border: 3px solid #AB6239;}

.content {
width: 100%; height: 100%;}

h3{
border-bottom: 2px solid #AB6239;
color:#FFC8AA;
font-size:24px;
line-height:25px;
font-family: 'Corbel';
text-align: center;
margin: 0px 5px 5px;
text-shadow: 1px 0px 0px #571F00,
0px 1px 0px #571F00,
-1px 0px 0px #571F00,
0px -1px 0px #571F00,
0px 0px 20px #571F00;}

a:link, a:visited{
background-color:#817F7F;
display: block;
width: 60px;
margin :10px;
padding: 4px;
border: 3px solid #B3AEAE;
border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
}

a:hover{
background-color:#817F7F;
width: 80px;
padding: 4px;
border: 3px solid #B3AEAE;
border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
}

#nav {
position: fixed;
left: 8%;
bottom: 64%;
height: 20%;
width: 50%;}

a:link, a:visited{
background-color:#817F7F;
display: block;
width: 18px;
margin :10px;
padding: 4px;
border: 3px solid #B3AEAE;
border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
}


</style>

 <div id="nav">
 <a href="#one"><img src="https://i.imgur.com/JNr5Paz.png"/></a>
 <a href="#two"><img src="https://i.imgur.com/JNr5Paz.png"/></a>
 <a href="#three"><img src="https://i.imgur.com/JNr5Paz.png"/></a>
 <a href="#four"><img src="https://i.imgur.com/JNr5Paz.png"/></a>
<a href="#reset"><img src="https://i.imgur.com/JNr5Paz.png"/></a>
 </div>

<div id="botimage"></div>
<div id="botimage1"></div>
<div id="botimage2"></div>
<div id="botimage3"></div>
<div id="botimage4"></div>
<div id="botimage5"></div>

<div id="sidebar"></div>


<div id="name">Bailey</div>

<div id="title">Houndoom #229</div>


<div id="one" class="detail" class="content"> <h3>Basic Information</h3>

Name: Bailey<br>
Gender: ♂<br>
Trainer: N/A<br>
Zodiac: ♌<br>
Race: Houndoom | Doberman<br>
Age: ?<br>
Orientation: Heterosexual <br>
Type: <img src="https://www.serebii.net/pokedex-bw/type/fire.gif"> <img src="https://www.serebii.net/pokedex-bw/type/dark.gif"> <br>
Height: 5'2" | 1.57 CM<br>
Weight: 98.2 LBS | 44.45 KG KG</div>

<div id="two" class="detail" class="content"> <h3>PKMN Combat</h3><br>

--Passive--<br>
<br>
Flash Fire<br>
<br>
--Skills--<br>
<br>
Nasty Plot <br>
Fire Blast<br>
Dark Pulse<br>
Flame charge<br></div>

<div id="three" class="detail" class="content"> <h3> Background</h3>Test 3</div>

<div id="four" class="detail" class="content"> <h3> Out of Pokemon</h3></div>