Rena

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Cinzel);
@import url(https://fonts.googleapis.com/css?family=Averia+Libre);
@import url(https://fonts.googleapis.com/css?family=Nosifer);
@import url(https://fonts.googleapis.com/css?family=Shojumaru);
::-webkit-scrollbar { width: 0.4vw; height: 0.4vw;}
::-webkit-scrollbar-track { border-radius: 0px; background-color: #563B3B;}
::-webkit-scrollbar-thumb { border: 0.1vh solid #B59090; border-radius:50px; background-color: #B14C4C;}

body{
 background-color: #000;
 background-image:url('');
}


#image {
	position:fixed;
	right:0;
	bottom:0;
	opacity:1.0;
	-webkit-animation: fade 2s 1s;
	animation: fade 2s 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	 }

	@-webkit-keyframes fade{
	from{
	opacity:1.0;
	}
	to{
	opacity:.0;
	}}
#image img{
 height: 100%;
}



#image2{
 position: fixed;
 z-index: 1;
 bottom: 0vh;
 right: 45vw;
 width: 30vw;
 opacity:0;
 -webkit-animation:picturein 2.5s 1;
 animation:picturein s 1;
 animation-delay:3s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:3s;
 -webkit-animation-fill-mode:forwards;
}
#image2 img{
 height: 98.5vh;
}

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


#infobackground{
 position: fixed;
 z-index: 3;
 top: 30vh;
 left: 8vw;
 height: 45.5vh;
 width: 20vw;
 background: #2C2B2B;
 border-top: 0.2vw solid #fff;
 border-bottom: 0.2vw solid #fff;
 border-left: 0.2vw solid #fff;
 border-right: 0.2vw solid #fff;
 box-shadow: -0.4vw 0.5vw 0.5vw #610101;
 overflow: hidden;
 color: #cccccc;
 font-family: Segoe Print;
 font-size: 10vh;
 opacity:0;
 -webkit-animation:infobackin 2.5s 1;
 animation:infobackin 2.5s 1;
 animation-delay:4.5s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:4.5s;
 -webkit-animation-fill-mode:forwards;
}

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

#infobox{
 position: static;
 z-index: 4;
 top: 30vh;
 left: 8vw;
 height: 45.5vh;
 width: 20vw;
 overflow: hidden;
 color: #cccccc;
 font-family: Segoe Print;
 font-size: 1.5vh;
 opacity:0;
 -webkit-animation:infobackin 2.5s 1;
 animation:infobackin 2.5s 1;
 animation-delay:4.5s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:4.5s;
 -webkit-animation-fill-mode:forwards;
}

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

#infobackground2{
 position: fixed;
 z-index: 3;
 top: 30vh;
 right: 8vw;
 height: 45.5vh;
 width: 20vw;
 background: #2C2B2B;
 border-top: 0.2vw solid #fff;
 border-bottom: 0.2vw solid #fff;
 border-left: 0.2vw solid #fff;
 border-right: 0.2vw solid #fff;
 box-shadow: 0.4vw 0.5vw 0.5vw #610101;
 overflow: hidden;
 color: #cccccc;
 font-family: Segoe Print;
 font-size: 10vh;
 opacity:0;
 -webkit-animation:infobackin 2.5s ;
 animation:infobackin 2.5s ;
 animation-delay:4.5s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:4.5s;
 -webkit-animation-fill-mode:forwards;
}

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

#infobox2{
 position: static;
 z-index: 4;
 top: 30vh;
 right: 8vw;
 height: 45.5vh;
 width: 20vw;
 overflow: hidden;
 color: #cccccc;
 font-family: Segoe Print;
 font-size: 1.5vh;
 opacity:0;
 -webkit-animation:infobackin 2.5s ;
 animation:infobackin 2.5s ;
 animation-delay:4.5s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:4.5s;
 -webkit-animation-fill-mode:forwards;
}

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



#name{
 position: fixed;
 z-index:2;
 left: 26vw;
 top: -0.2vh;
 color: #FFFFFF;
 text-shadow: -0.3vw 0.3vw 0.3vw #610101;
 font-family: Nosifer;
 font-size: 4vw;
 letter-spacing: 0.5vw;
 opacity:0;
 -webkit-animation:namefade 1.5s 1;
 animation:namefade 1.5s 1;
 animation-delay:4s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:4s;
 -webkit-animation-fill-mode:forwards;
}

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


h1{
 color: #E6A8A8;
 text-shadow: -0.2vw 0.2vw 0.2vw #610101;
 font-family: Shojumaru;
 font-size: 2.5vh;
 letter-spacing: 0.5vw;
 font-weight: normal;
}

hr{
 border: 0.2vh solid #FFFFFF;
 outline: 0.2vw solid #610101;
 box-shadow: -0.2vw 0.2vw 0.2vw #610101;
 width: 90%;
}

b, strong {color: #477F8E; font-family: Averia Libre; font-size: 1.8vh; font-style: normal; font-weight: bold; text-decoration: none; font-style: italic; font-weight: normal;}

a {
color: #13AD53;
text-decoration: none;
}

a:link, a:active, a:visited {
font-size:1.5vh;
letter-spacing:0px;
text-decoration: none;
color: #D88A8A;
-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:#52AFAC;
text-decoraction: line-through;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
}

#buttons {
 z-index:3;
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 6.4vw;
 background-color: transparent;
 position: fixed;
 top: 31vh;
 left: 1.5vw;
 overflow: auto;
 font-family: Shojumaru;
 opacity:0;
 -webkit-animation:buttonfade 2.5s 1;
 animation:buttonfade 2.5s 1;
 animation-delay:4.5s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:4.5s;
 -webkit-animation-fill-mode:forwards;
}

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


#buttons a {
 display: block;
 color: #FFFFFF;
 text-shadow: -0.2vw 0.2vw 0.2vw #610101;
 font-size: 2vh;
 padding: 0vh 0vh 0vh 0vh;
 text-decoration: none;
}

#buttons a:hover{
 color:#C16E6E;
 text-shadow: -0.2vw 0.2vw 0.2vw #610101;
 font-size: 2vh;
}

#buttons2 {
 z-index:3;
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 6.4vw;
 background-color: transparent;
 position: fixed;
 top: 31vh;
 right: 1.5vw;
 overflow: auto;
 font-family: Shojumaru;
 opacity:0;
 -webkit-animation:buttonfade 2.5s 1;
 animation:buttonfade 2.5s 1;
 animation-delay:4.5s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:4.5s;
 -webkit-animation-fill-mode:forwards;
}

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


#buttons2 a {
 display: block;
 color: #FFFFFF;
 text-shadow: -0.2vw 0.2vw 0.2vw #610101;
 font-size: 2vh;
 padding: 0vh 0vh 0vh 0vh;
 text-decoration: none;
}

#buttons2 a:hover{
 color:#C16E6E;
 text-shadow: -0.2vw 0.2vw 0.2vw #610101;
 font-size: 2vh;
}

.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);}

</style>


<div id="image">
<img src="http://i.imgur.com/5MNxMm8.png">
</div>

<div id="image2">
<img src="http://i.imgur.com/zbxe3SQ.png">
</div>

<div id="name">
Rena Ryuuguu
</div>

<div id="buttons">
<center>
<a href="#stats">Stats</a>
<a href="#bio">Bio</a>
</center>
</div>
<div id="buttons2">
<center>
<a href="#friends">Friends</a>
<a href="#ooc">OOC</a>
</center>
</div>


<div id="infobackground">
<div id="infobox">
<center>
<div style="height: 100%; overflow-y: hidden;">
<a name="stats"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="center">
<h1>Stats</h1>
<b>Words</b> here
</div>

<a name="bio"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="center">
<h1>Story</h1>
Words
</div>
</div>
</div>
</div>

<div id="infobackground2">
<div id="infobox2">
<a name="friends"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="center">
<h1>Friends</h1>

</div>

<a name="ooc"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="center">
<h1>OOC</h1>
Words
</div>
</div>