Ryoku

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Caveat);
@import url(https://fonts.googleapis.com/css?family=Farsan);
@import url(https://fonts.googleapis.com/css?family=Yellowtail);

::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { border-radius: 2px; background-color: transparent; }
::-webkit-scrollbar-thumb { border-radius: 2px; background-color: #transparent; }

body {
background-image: url("http://i.imgur.com/QyFixSd.png");
background-repeat: repeat;
background-color: #0B091D;
background-size: ;
background-position: bottom right;
margin: 0;
}

.name{
 position: absolute;
 z-index:2;
 left: 48%;
 top: 2%;
 color: #424190;
 text-shadow: 0.1vw 0.1vw 0.1vw #000;
 font-family: Yellowtail;
 font-size: 8vw;
 letter-spacing: 0.5vw;
 opacity:1;
}


#mainpic {
 position:fixed;
 z-index: 3;
 width:31%;
 height: 100%;
 left: 2%;
 bottom: 0px;
 background: #6D6D6B;
 color: #6D6D6B;
 font-size:2vh;
 border-right: 0.8vh solid #262163;
 border-left: 0.8vh solid #262163;
 box-shadow: 5px 2px 6px #000000;
 overflow:hidden;
}
#mainpic img {
 width: 100%;
height: 100%}

#infobackground{
 position: fixed;
 z-index: 3;
 top: 28%;
 left: 43%;
 height: 60vh;
 width: 60vh;
 border-radius: 10%;
 background: #;
 background-size: 100% 100%;
 background-color:#120E32;
 background-position: center;
 background-repeat:no-repeat;
 border: 0.2vw solid #262163;
 box-shadow: 0.4vw 0.5vw 0.5vw #000;
 overflow: hidden;
 color: #fff;
 font-family: Caveat;
 font-size: 10vh;
padding:5px;
}
#infobox{
 position: static;
 z-index: 4;
 top: 28vh;
 left: 20vw;
 height: 60vh;
 width: 60vh;
 overflow: hidden;
 color: #fff;
 font-family: Caveat;
 font-size: 2.5vh;
 padding:10px;
}



.tab1 { z-index:10; position: absolute; top: 25%; left: 48%; width: 3%; height: 1%; border: 1px solid black;background-color: #262163;box-shadow:0px 0px 10px #000;}
.tab2 { z-index:10; position: absolute; top: 25%; left: 56.5%; width: 3%; height: 1%; border: 1px solid black;background-color: #262163;box-shadow:0px 0px 10px #000;}
.tab3 { z-index:10; position: absolute; top: 25%; left: 65%; width: 3%; height: 1%; border: 1px solid black;background-color: #262163;box-shadow:0px 0px 10px #000;}

a {color: #9AB0C5; text-decoration: none;letter-spacing:1px; }
a:hover {color: #57BCB5; text-decoration: line-through;
cursor: url('http://media.tumblr.com/e7f72e808c4dbe5006b9c3a30dbc9b79/tumblr_inline_mh67vhwGnR1rdqsqf.png');}

h1{
color:#6B61F7;
font-size:3vw;
line-height: 14px;
font-family:Caveat;
text-align: center;
letter-spacing:3px;
margin-top:2px;
margin-bottom:20px;
text-shadow: 0.1em 0 0 #000;
}

b, strong {color: #6B61F7; font-family:Caveat; font-size: 19px; font-style: normal; font-weight: ; text-decoration: none;letter-spacing:1px;text-shadow: 0.1em 0 0 #000;}

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

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

<div id="mainpic">
<img src="http://i.imgur.com/qNz6MTJ.png">
</div>
<div class="name">
Ryoku
</div>

<a href="#1"><div class="tab1"></div></a>
<a href="#2"><div class="tab2"></div></a>
<a href="#3"><div class="tab3"></div></a>



<div id="infobackground">
<div id="infobox">
<center>
<div style="height: 100%; overflow-y: hidden;">
<a name="1"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="left">
<br>
<h1>Title</h1>
Words <b>Bold</b> <i>italic</i> <a href="link.com" target="_blank">Link</a>

</div>


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


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