Satoshi

<style>
@import url(https://fonts.googleapis.com/css?family=Tillana);
@import url(https://fonts.googleapis.com/css?family=Caesar+Dressing);
@import url(https://fonts.googleapis.com/css?family=Aclonica);
::-webkit-scrollbar { width: 0.4vw; height: 0.4vw;}
::-webkit-scrollbar-track { border-radius: 0px; background-color: #;}
::-webkit-scrollbar-thumb { border: 0.1vh solid #; border-radius:50px; background-color: #;}

body{
 background-color: #fff;
 background-image:url('');
cursor: url(http://i.picpar.com/mDUb.png), progress !important;
}


#image{
 position: fixed;
 z-index: 0;
 bottom: 0vh;
 left: 0vw;
 width: 30vw;
 opacity:0;
 -webkit-animation:picturein 1.5s 1;
 animation:picturein s 1;
 animation-delay:1.5s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:1s;
 -webkit-animation-fill-mode:forwards;
}
#image img{
 height: 98.5vh;
}

@keyframes picturein{
from{opacity:0; left: -30vw;}
to{opacity:1;}
}


#infobackground{
 position: fixed;
 z-index: 0;
 top: 23vh;
 right: 24vw;
 height: 60vh;
 width: 60vh;
 border-radius: 50%;
 background: #C40404;
 background-size: 100% 100%;
 background-color:#;
 background-image:url(http://i.imgur.com/Jhr8Am2.png);
 background-position: center;
 background-repeat:no-repeat;
 border: 3px groove #fff;
 box-shadow: 0px 0px 50px #C52424;
 -moz-box-shadow: 0 0 50px #C52424;
 -webkit-box-shadow: 0 0 50px #C52424;
 overflow: hidden;
 color: #ccc;
 font-family: Tillana;
 font-size: 10vh;
 opacity:0;
 -webkit-animation:infobackin 2.5s 1;
 animation:infobackin 2.5s 1;
 animation-delay:3s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:3s;
 -webkit-animation-fill-mode:forwards;
}

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

#infobox{
 position: static;
 z-index: 2;
 top: 23vh;
 right: 24vw;
 height: 60vh;
 width: 60vh;
 background-color: #C52424;
 overflow: hidden;
 color: #ccc;
 font-family: Tillana;
 font-size: 1.5vh;
 opacity:0;
 -webkit-animation:infoboxin 2.8s 1;
 animation:infoboxin 2.8s 1;
 animation-delay:3.8s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:3.8s;
 -webkit-animation-fill-mode:forwards;
}

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

h1{
 margin-top:2px;
 margin-bottom:2px;
 color: #000;
 text-shadow: -0.2vw 0.2vw 0.2vw #ccc;
 font-family: Caesar Dressing;
 font-size: 3.1vh;
 text-align: center;
 letter-spacing: 0.5vw;
 font-weight: normal;
}

b, strong {color: #000; font-family: Aclonica; font-size: 1.5vh; font-style: normal; font-weight: bold; text-decoration: none; font-style: italic; font-weight: normal;}

a {
color: #AE8D1E;
text-decoration: none;
}

a:link, a:active, a:visited {
font-size:1.5vh;
letter-spacing:0px;
text-decoration: none;
color: #AE8D1E;
text-shadow: -0.1vw 0.1vw 0.1vw #;
cursor: url(http://i.picpar.com/mDUb.png), progress !important;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
}

a:hover {
font-size:1.5vh;
color:#BA1212;
text-shadow: -0.1vw 0.1vw 0.1vw #;
text-decoraction: line-through;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
}

#nav a, #nav a:link, #nav a:visited {
position: fixed;
display: block;
background: #;
background-size: 100% 100%;
background-color:#;
background-image:url(http://i.imgur.com/OjuZvAG.gif);
background-position: center;
background-repeat:no-repeat;
color: #000;
height: 50px;
width:50px;
opacity:0;
-webkit-animation:buttonfade 2.5s 1;
 animation:buttonfade 2.5s 1;
 animation-delay:3s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:3s;
 -webkit-animation-fill-mode:forwards;
}

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

#nav a:active, #nav a:hover {
display:block;
height: 25px;
width:25px;
text-decoration:none;
background: #;
background-size: 100% 100%;
background-color:#;
background-image:url(http://i.imgur.com/DQ09T6p.png);
background-position: center;
background-repeat:no-repeat;
cursor: url(http://i.picpar.com/mDUb.png), progress !important;
color: #fff;
}

.button{
position:fixed;
z-index:2;
width:50px;
background:;
height:50px;
overflow:hidden;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;}

.circle{
border-radius:0px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
}

.circle:hover{
border-radius:0px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -o-transform: rotate(-360deg);}

#credit{ position: fixed;
z-index: 10;
right: 10px;
bottom: 0px;
font-family: Arial;
font-variant: normal;
font-weight: bold;
font-size: 90%;
color: #000;
z-index:1;}


</style>
<div id="credit">
Layout © <a href="profile.php?user=Pachi" target="_blank">Pachi</a>
</div>


<img src="http://i.imgur.com/Zb36VJA.png" height="10%" style="position:fixed; top:2%; right: 3%;">
<div id="image">
<img src="http://i.imgur.com/pyCOFqb.jpg">
</div>

<div id="buttons">
<div id="nav">
<div class="button" style="top:25%; right:25%;"> <a href="#1"></a> </div>
<div class="button" style="top:35%; right:21%;"> <a href="#2"></a> </div>
<div class="button" style="top:46.5%; right:20.1%;"> <a href="#3"></a> </div>
<div class="button" style="bottom:34%; right:21%;"> <a href="#4"></a> </div>
<div class="button" style="bottom:22.5%; right:24%;"> <a href="#5"></a> </div>
</div>


<div id="infobackground">
<div id="infobox">
<center>
<div style="height: 100%; overflow-y: hidden;">
<a name="1"></a>
<div style="width:60%; height: 99%; top: 100px; overflow: auto;" align="center">
<br>
<h1>Stats</h1>
words here

</div>

<a name="2"></a>
<div style="width:60%; height: 99%; top: 100px; overflow: auto;" align="center">
<br><br>
<h1>Title here</h1>
words
</div>

<a name="3"></a>
<div style="width:60%; height: 99%; top: 100px; overflow: auto;" align="center">
<br><br>
<h1>Title here</h1>
words
</div>

<a name="4"></a>
<div style="width:65%; height: 98%; top: 100px; overflow: auto;" align="center">
<br><br>
<h1>Friends</h1>
<center>
<a href="profile.php?user=Entei" target="_blank" title="Words"><img src="http://i.imgur.com/1mcDQi2.png" height="70" width="70" align="left"></a> - Name Here -<br>Description here <br><br><br>

<a href="profile.php?user=Entei" target="_blank" title="Words"><img src="http://i.imgur.com/1mcDQi2.png" height="70" width="70" align="left"></a> - Name Here -<br>Description here <br><br><br>
</center>
</div>

<a name="5"></a>
<div style="width:65%; height: 97%; top: 100px; overflow: auto;" align="center">
<br><br>
<h1>Out of Pokeballs</h1>
words
</div>
</div>
</center>
</div>
</div>