<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Shojumaru');
@import url('https://fonts.googleapis.com/css?family=Glass+Antiqua|Shojumaru');
@import url('https://fonts.googleapis.com/css?family=La+Belle+Aurore');
@import url('https://fonts.googleapis.com/css?family=Gaegu');

.pfor {display: none;}
#profile { background-color: transparent; border: 0px;}

body {
background-image: url(https://thumbs.dreamstime.com/b/background-cuisine-cooking-seamless-white-vector-pattern-orange-linear-icons-food-beverages-kitchen-utensils-64000249.jpg);
background-color: #edddb4;
background-repeat: non-repeat;
background-size: 10%;
background-position: 0% 0%; }


::-webkit-scrollbar {
 display: none;
}

a {color:;
 text-decoration: none;
 transition: 1.5s;
 }

 a:hover {color: #a99998;
 text-decoration: none;
 transition: 1.5s;
 }

b, strong { font-family: Josefin Sans; font-size: 15px;line-height: 15px; font-weight: bold;
 color: #da8e3d;
 text-shadow: 1px 0px 0px #da8e3d,
 -1px 1px 0px #9e9dd1,
 0px 0px 0px #9e9dd1,
 0px -1px 0px #9e9dd1,
 0px 0px 1px #9e9dd1;
}


td.one{
 width: 261px;
 font-family: Comfortaa;
 font-size: 12px;
 text-align: left;
 word-spacing: 1px;
 letter-spacing: 1px;
 line-height: 11px;
 font-weight: bold;
 color: #da8e3d;
z-index: 20;
 }

 td.two{
 width: 261px;
 font-family: Comfortaa;
 font-size: 12px;
 text-align: right;
 word-spacing: 1px;
 letter-spacing: 0px;
 line-height: 11px;
 color: b56227;
z-index: 20;
 }

.img {
Position: fixed;
Border: ;
Height: 667px;
Width: 455px;
Left: -30px;
Top: 55px;
overflow:;
opacity: 0.;
transform: rotate(0deg);
}


h1{
 border-bottom:0px solid #DADADA;
 color: #828184;
 font-size:67px;
 line-height: 17px;
 font-family: 'Gaegu', cursive;
 text-align: center;
 text-transform:uppercase;
 letter-spacing:5px;
 margin: 0px 5px 5px;


 }

.headline {
 white-space: nowrap;
 position: absolute;
 top: 490px;
 left: 500px;
 color: black;
 text-shadow: 2px 2px #ff0000;
 color: rgba(165,0,0,1);
 text-decoration: normal;
 text-align: center;
 -o-text-overflow: clip;
 text-overflow: clip;
 white-space: pre;
 text-shadow: 4px 0 10px rgba(0,0,0,1) , 0 0 20px rgba(0,0,0,1) , 0 0 30px #f46464 , 0 0 40px #261f21 , 0 0 70px #261f21 , 0 0 80px #261f21 , 0 0 100px #261f21 ;
 -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

.infobox {
Padding: 5px;
Position: fixed;
Top: 40px;
left: 484px;
Border: 3px solid #513222;
width: 355px;
Height: 480px;
opacity: .;
Background-color: transparent;
Background-position: center center;
Color: red;
Font-size: 15px;
Font-color: black;
font-family: 'Glass Antiqua', cursive;
word-wrap: break-word;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 10px;
border-image: url(http://www.freeimageslive.com/galleries/backdrops/wood/pics/oak_tree_bark.jpg) 30 round;
z-index: 2;

}

.box {
 position: fixed;
Top: 100px;
left: 500px;
width: 340px;
Height: 460px;
 font-size: 10px;
 line-height: 13px;
 text-align: center;
font-size: 12px;
font-family: Oswald;
 color: #661313;
background-color: transparent;
Border-radius: 0px;
 overflow: auto;
 overflow-x: auto;
 opacity: 0;
 transition: all 1.3s ease-in-out;
 -webkit-transition: all 1.3s ease-in-out;
 -moz-transition: all 1.3s ease-in-out;
 -o-transition: all 1.3s ease-in-out;
 -ms-transition: all 1.3s ease-in-out;
 z-index:2;
 }

 .box:target {
Top: 100px;
left: 500px;
height: 460px;
 text-align: center;
 overflow: auto;
 overflow-x: auto;
 opacity: 1.0;
transition: all 0.5s ease-in-out;
 -webkit-transition: all 1.3s ease-in-out;
 -moz-transition: all 1.3s ease-in-out;
 -o-transition: all 1.3s ease-in-out;
 -ms-transition: all 1.3s ease-in-out;
 z-index:10;
 }


#navi{
 position:absolute;
 text-align:center;
 left:885px;
 top:220px;
 transform: rotate(0deg);
z-index: 1;
}

 #navi a{
 display: block;
 background-color: #513222 ;
 padding-top: 0px;
 margin-top: 10px;
 width: 0px;
 height: 50px;
 border-radius: 100px;
 border: ;
 border-color: white;
 }

 #navi a:hover{
 transition: 1.5s;
 }


</style>


<div id="navi">

<a href="#one"><img src="http://rs385.pbsrc.com/albums/oo296/EmO_TEnTAi/HRM%20pixels/bacon_pixel.gif~c200" height="60"> </a>

<a href="#two"><img src="http://rs385.pbsrc.com/albums/oo296/EmO_TEnTAi/HRM%20pixels/bacon_pixel.gif~c200" height="60"></a>

<a href="#three"><img src="http://rs385.pbsrc.com/albums/oo296/EmO_TEnTAi/HRM%20pixels/bacon_pixel.gif~c200" height="60"></a>

<a href="#four"><img src="http://rs385.pbsrc.com/albums/oo296/EmO_TEnTAi/HRM%20pixels/bacon_pixel.gif~c200" height="60"></a>
</div>

<div class="infobox">
</div>

<div id="one" class="box">
<div style="width:335; height:450; overflow-y: auto;">
<table>
 <tr><td class="one">
 <b>Name</b>
 </td><td class="two">

 </td></tr><tr>
<table>
 <tr><td class="one">
 <b>Nicknames</b>
 </td><td class="two">

 </td></tr><tr>
<table>
 <tr><td class="one">
 <b>Age</b>
 </td><td class="two">
 ---
 </td></tr><tr>
<table>
 <tr><td class="one">
 <b>Height</b>
 </td><td class="two">
---
 </td></tr><tr>
<table>
 <tr><td class="one">
 <b>Weight</b>
 </td><td class="two">
---
 </td></tr><tr>
<table>
 <tr><td class="one">
 <b>Gender</b>
 </td><td class="two">
 ---
 </td></tr><tr>
<table>
 <tr><td class="one">
 <b>Sexuality</b>
 </td><td class="two">
 ---
 </td></tr><tr>
<table>
 <tr><td class="one">
 <b>Marital Status</b>
 </td><td class="two">
 ---
 </td></tr><tr>
<table>
 <tr><td class="one">
 <b>Species</b>
 </td><td class="two">
 ---
 </td></tr><tr>
</table>
</div>
</div>


<div id="two" class="box">

<div style="width:335; height:250; overflow-y: auto;">
</div>
</div>

<div id="three" class="box">

<div style="width:335; height:60; overflow-y: auto;">
</div>
</div>

<div id="four" class="box">
1. Coding was made by Black Onyx Designs</a><Br>
<div style="width:335; height:150; overflow-y: auto;">
</div>
</div>
</div>

</div>



<div class="img"><img src="https://i.imgur.com/VAtokJF.png" height="667px">
</body>