Paradoxa

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Cormorant+Unicase);
@import url(https://fonts.googleapis.com/css?family=Quicksand);
@import url(https://fonts.googleapis.com/css?family=Cinzel);
::-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:black;}
.image{position:absolute;top:0%;left:33.5%;width:32%;height:98.5%;background:url(http://i.picpar.com/GX6b.jpg);background-size:100% 100%;background-position:center;background-color:transparent;background-repeat:no-repeat; border: 6px groove white;z-index:-2;opacity:0.5;
-webkit-animation-name: title1;
    -webkit-animation-duration: 10s;
    animation-name:title1;
    animation-duration: 10s;
}

@-webkit-keyframes title1 {
    0% {opacity:1;z-index:2;}
      10% {opacity:0.30;z-index:2;}
         20% {opacity:1;z-index:2;}
            30% {opacity:0.30;z-index:2;}
              40% {opacity:1;z-index:2;}
            50% {opacity:0.30;z-index:2;}
              60% {opacity:1;z-index:2;}
            70% {opacity:0.30;z-index:2;}
    100% {opacity:0.5;z-index:-2;}
}

@keyframes title1  {
     0% {opacity:1;z-index:2;}
      10% {opacity:0.30;z-index:2;}
         20% {opacity:1;z-index:2;}
            30% {opacity:0.30;z-index:2;}
              40% {opacity:1;z-index:2;}
            50% {opacity:0.30;z-index:2;}
              60% {opacity:1;z-index:2;}
            70% {opacity:0.30;z-index:2;}
    100% {opacity:0.5;z-index:-2;}
}

h1{
 color: #000;
 text-shadow: -0.2vw 0.2vw 0.2vw #fff;
 font-family: Cormorant unicase;
 font-size: 3.5vh;
 letter-spacing: 0.5vw;
 font-weight: normal;
}


b, strong {color: #ccc; font-family: Cinzel; font-size: 1.6vh; font-style: normal; font-weight: bold; text-decoration: none; font-style: italic; font-weight: normal; text-shadow: -0.1vw 0.1vw 0.1vw #fff;}

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

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

#infobackground{
 position: fixed;
 z-index: 3;
 top: 30vh;
 left: 8vw;
 height: 45.5vh;
 width: 20vw;
 background: #0E0D0D;
 border-top: 0.2vw groove #727070;
 border-bottom: 0.2vw groove #727070;
 border-left: 0.2vw groove #727070;
 border-right: 0.2vw groove #727070;
 box-shadow: -0.4vw 0.5vw 0.5vw #fff;
 overflow: hidden;
 color: #cccccc;
 font-family: quicksand;
 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: #000;
 text-shadow: -0.1vw 0.1vw 0.1vw #fff;
 font-family: quicksand;
 font-size: 1.7vh;
 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: #0E0D0D;
 border-top: 0.2vw groove #727070;
 border-bottom: 0.2vw groove #727070;
 border-left: 0.2vw groove #727070;
 border-right: 0.2vw groove #727070;
 box-shadow: 0.4vw 0.5vw 0.5vw #fff;
 overflow: hidden;
 color: #cccccc;
 font-family: quicksand;
 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: #000;
 text-shadow: -0.1vw 0.1vw 0.1vw #fff;
 font-family: quicksand;
 font-size: 1.7vh;
 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;}
}

#buttons {
 z-index:2;
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 8.4vw;
 background-color: transparent;
 position: fixed;
 top: 50vh;
 left: 46vw;
 overflow: auto;
 font-family: Cormorant unicase;
 font-weight: bold;
 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: #000000;
 text-shadow: -0.2vw 0.2vw 0.2vw #fff;
 font-size: 4vh;
 padding: 0vh 0vh 0vh 0vh;
 text-decoration: none;
}

#buttons a:hover{
 color:#ffffff;
 text-shadow: -0.2vw 0.2vw 0.2vw #cccccc;
 font-size: 4vh;
}






</style>
<div class="image"></div>

<div id="buttons">
<center>
<a href="#stats">Stats</a>
<a href="#bio">Bio</a>
<a href="#abilities">Abilities</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>Bio</h1>
Words
</div>
</div>
</div>
</div>

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

<a name="ooc"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="center">
<h1>OOC</h1>
Profile code by: <a href="profile.php?user=Pachi" target="_blank">Pachi</a>. Ask her if you can use it.<br><br>
</div>
</div>