Vaughn Layout

<style>
@import url(https://fonts.googleapis.com/css?family=Cinzel+Decorative|Raleway:300);
::-webkit-scrollbar { width: 0.9vh; height: 0.9vh;}
::-webkit-scrollbar-track { border-radius: 0px; background-color: transparent;}
::-webkit-scrollbar-thumb { border: 0.4vh solid #151515; border-radius:0px; background-color: #C52429;}

body {
background-color:#2B2B2B;
}

#statbut {
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 6%;
 background-color: #1e1e1e;
 border: 0.4vh solid #C52429;
 box-shadow: 4px 4px 5px #000000;
 position: fixed;
 z-index:1;
 -ms-transform: skewX(-30deg);
 -webkit-transform: skewX(-30deg);
 transform: skewX(-30deg);
 top: 10%;
 left: 18%;
 overflow: auto;
opacity:0;
 font-family: Times New Roman;

-webkit-animation:statanim 0.5s 1;
animation:statanim 0.5s 1;
animation-delay:4.9s;
animation-fill-mode:forwards;
-webkit-animation-delay:4.9s;
-webkit-animation-fill-mode:forwards;}

@keyframes statanim{
from{left:0%;opacity:0;}
to{left:18%;opacity:1;}
}
@-webkit-keyframes statanim{
from{left:0%;opacity:0;}
to{left:18%;opacity:1;}
}

#statbut a {
 display: block;
 color:#C52429;
 text-shadow: 2px 2px 2px #000000;
 font-size: 2vh;
 padding: 4% 8px 4% 8px;
 text-decoration: none;
 transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -webkit-transition: all 0.3s ease-in-out;
}

#statbut a:hover{
 background-color: #C52429;
 color:#FFFFFF;
 text-shadow: 2px 2px 2px #000000;
 font-size: 2vh;
}

#biobut {
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 6%;
 background-color: #1e1e1e;
 border: 0.4vh solid #C52429;
opacity:0;
 box-shadow: 4px 4px 5px #000000;
 position: fixed;
 z-index:1;
 -ms-transform: skewX(-30deg);
 -webkit-transform: skewX(-30deg);
 transform: skewX(-30deg);
 top: 15%;
 left: 18%;
 overflow: auto;
 font-family: Times New Roman;
-webkit-animation:bioanim 0.5s 1;
animation:bioanim 0.5s 1;
animation-delay:4.6s;
animation-fill-mode:forwards;
-webkit-animation-delay:4.6s;
-webkit-animation-fill-mode:forwards;}

@keyframes bioanim{
from{left:0%;opacity:0;}
to{left:18%;opacity:1;}
}
@-webkit-keyframes bioanim{
from{left:0%;opacity:0;}
to{left:18%;opacity:1;}
}

#biobut a {
 display: block;
 color:#C52429;
 text-shadow: 2px 2px 2px #000000;
 font-size: 2vh;
 padding: 4% 8px 4% 8px;
 text-decoration: none;
 transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -webkit-transition: all 0.3s ease-in-out;
}

#biobut a:hover{
 background-color: #C52429;
 color:#FFFFFF;
 text-shadow: 2px 2px 2px #000000;
 font-size: 2vh;
}

#oocbut {
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 6%;
 background-color: #1e1e1e;
 border: 0.4vh solid #C52429;
 box-shadow: 4px 4px 5px #000000;
 position: fixed;
 z-index:1;
 -ms-transform: skewX(-30deg);
 -webkit-transform: skewX(-30deg);
 transform: skewX(-30deg);
 top: 20%;
 left: 18%;
 overflow: auto;
opacity:0;
 font-family: Times New Roman;
-webkit-animation:oocanim 0.5s 1;
animation:bioanim 0.5s 1;
animation-delay:4.3s;
animation-fill-mode:forwards;
-webkit-animation-delay:4.3s;
-webkit-animation-fill-mode:forwards;}

@keyframes oocanim{
from{left:0%;opacity:0;}
to{left:18%;opacity:1;}
}
@-webkit-keyframes oocanim{
from{left:0%;opacity:0;}
to{left:18%;opacity:1;}
}

#oocbut a {
 display: block;
 color:#C52429;
 text-shadow: 2px 2px 2px #000000;
 font-size: 2vh;
 padding: 4% 8px 4% 8px;
 text-decoration: none;
 transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -webkit-transition: all 0.3s ease-in-out;
}

#oocbut a:hover{
 background-color: #C52429;
 color:#FFFFFF;
 text-shadow: 2px 2px 2px #000000;
 font-size: 2vh;
}

audio{
width:
}

#player{
 position: absolute;
 z-index:0;
 top:25%;
 left:19vw;
 width: 5%;
 border: 0.4vh solid #C52429;
 box-shadow: 4px 1px 5px #000000;

 opacity:0;
 overflow: hidden;
 animation:musicfade 0.5s 1;
animation-delay:4s;
animation-fill-mode:forwards;
-webkit-animation:musicfade 0.5s 1;
-webkit-animation-delay:4s;
-webkit-animation-fill-mode:forwards;}

@keyframes musicfade{
from{left:0%;opacity:0;}
to{opacity:1;}
}
@-webkit-keyframes musicfade{
from{left:20%;opacity:0;}
to{opacity:1;}
}

#titlebar{
 position: absolute;
 z-index: 0;
 left: 0%;
 top: 30%;
 width: 90%;
 color:#C52429;
 background: #C52429;
 box-shadow: 4px 4px 5px #000000;
 font-family: Cinzel Decorative;
 font-size: 11vh;
 -ms-transform: skewX(-30deg);
 -webkit-transform: skewX(-30deg);
 transform: skewX(-30deg);
 opacity:0;
 -webkit-animation: titebarmove 0.5s 1;
 animation: titlebarmove 0.5s 1;
 animation-delay:2s;
 -webkit-animation-delay:2s;
 animation-fill-mode: forwards;
 -webkit-animation-fill-mode: forwards;}

@-webkit-keyframes titlebarmove {
from {top: 0%; opacity: 0;}
to {top: 30%;opacity: 1;}
}


@keyframes titlebarmove {
from {top: 0%;opacity: 0;}
to {top: 30%; opacity: 1;}
}

#title {
 position: absolute;
 z-index: 1;
 left: 20%;
 top: 31%;
 color:#FFFFFF;
 text-shadow: 4px 1px 2px #000000;
 font-family: Cinzel Decorative;
 font-size: 11vh;
 opacity:0;
 -ms-transform: skewX(-30deg); /* IE 9 */
 -webkit-transform: skewX(-30deg); /* Safari */
 transform: skewX(-30deg);
 -webkit-animation: name 0.5s 1;
 animation: name 0.5s 1;
 animation-delay: 2.5s;
 -webkit-animation-delay:2.5s;
 animation-fill-mode:forwards;
 -webkit-animation-fill-mode:forwards;
}

@-webkit-keyframes name{
from{left:0%;opacity:0;}
to{left:20%;opacity:1;}
}
@keyframes name{
from{left:0%;opacity:0;}
to{left:20%;opacity:1;}
}

#subtitle{
 position: absolute;
 z-index:2;
 left: 50%;
 top: 37%;
 color:#C52429;
 text-shadow: 2px 1px 2px #000000;
 font-family: Cinzel Decorative;
 font-size: 8vh;
 -ms-transform: skewX(-30deg); /* IE 9 */
 -webkit-transform: skewX(-30deg); /* Safari */
 transform: skewX(-30deg);
 opacity:0;
 -webkit-animation: subfade 1s 1;
 animation: subfade 1s 1;
 animation-fill-mode:forwards;
 animation-delay:3s;
 -webkit-animation-delay:3s;
 -webkit-animation-fill-mode:forwards;}

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

#mainpic {
 position:fixed;
 z-index: 3;
 width:19%;
 height: 100%;
 left: 0px;
 bottom: 0px;
 background: #6D6D6B;
 color: #6D6D6B;
 font-size:2vh;
 border-right: 0.8vh solid #C52429;
 box-shadow: 4px 1px 5px #000000;
 overflow:hidden;
 opacity:0;
 -webkit-animation: picturefade 1s 1;
 animation: picturefade 1s 1;
 animation-delay:1s;
 -webkit-animation-delay:1s;
 animation-fill-mode: forwards;
 -webkit-animation-fill-mode: forwards;}
#mainpic img {
 width: 100%;}

@-webkit-keyframes picturefade{
0%{left:-20%;opacity:0;}
100%{left:0%;opacity:1;}
}

@keyframes picturefade{
0%{left:-20%;opacity:0;}
100%{left:0%;opacity:1;}
}

#infobox{
 position: fixed;
 z-index:1;
 height: 98%;
 background-color:transparent;
 border-radius: 5px;
 border: 2px solid #80584A;
 box-shadow: 0px 0px 64px #000000;
 right: 72px;
 width: 50%;
 top: 1%;
 color:#FFBE56;
 text-shadow: 2px 2px 2px #000000;
 font-family: Times New Roman ;
 font-size: 16pt;}
 #infobox img {
 width: 100%;}

#credit{
 position: fixed;
 z-index:2;
 bottom: 5px;
 right: 5px;
 color:#FFBE56;
 text-shadow: 1px 1px 0px #000000;
 font-family: Cinzel Decorative;
 font-size: 2vh;}

a{
 color: #FFBE56;
 text-shadow: 1px 1px 0px #000000;
 font-family: Cinzel Decorative;
 font-size: 2vh;
 text-decoration: none;
 transition: 0.5s;
}
a:hover{
 color: #FFFFFF;
}

#borderbox{
position:absolute;
z-index:0;
top:46%;
left:0%;
width:79%;
height:52%;
background: #1e1e1e;
border: 0.5vh solid #151515;
box-shadow: 4px 4px 5px #000000;
opacity:0;
-ms-transform: skewX(-30deg); /* IE 9 */
-webkit-transform: skewX(-30deg); /* Safari */
transform: skewX(-30deg);
-webkit-animation:borderslide 1s 1;
animation:borderslide 1s 1;
animation-delay:3.5s;
animation-fill-mode:forwards;
-webkit-animation-delay:3.5s;
-webkit-animation-fill-mode:forwards;}

@keyframes borderslide{
from{left:-40%;opacity:0;}
to{left:0%;opacity:1;}
}
@-webkit-keyframes borderslide{
from{left:-40%;opacity:0;}
to{left:0%;opacity:1;}
}

#textscroll{
position:absolute;
z-index:6;
left:21%;
top: 49%;
width:49%;
height:48%;
padding:4px;
color: #FFFFFF;
font-size: 2vh;
line-height:2.5vh;
letter-spacing: 0.15vh;
font-family: 'Raleway';
text-shadow:2px 2px 2px #000000;
opacity: 0;
animation:textfade 1s 1;
animation-delay:5.5s;
animation-fill-mode:forwards;
-webkit-animation:textfade 1s 1;
-webkit-animation-delay:5.5s;
-webkit-animation-fill-mode:forwards;}

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

h1 {
font-family: Cinzel Decorative;
font-size: 4vh;
font-weight: normal;
color: #C52429;
text-shadow: 2px 2px 0px #000000;
text-align: center;
letter-spacing: 1vw;
}

h2 {
font-family: Cinzel Decorative;
font-size: 2vh;
font-weight: bold;
color: #C52429;
text-shadow: 2px 2px 0px #000000;
letter-spacing: 1vh;
text-align: left;
}

h3 {
font-family: Cinzel Decorative;
font-size: 2vh;
font-weight: bold;
color: #C52429;
text-shadow: 2px 2px 0px #000000;
letter-spacing: 1vh;
text-align: center;
line-height: 1.5vh;
}

hr {
border-color: #C52429;
box-shadow: 2px 2px 0px #000000;
}
</style>

<div id="statbut">
<center>
<a href="#stats">Stats</a>
</center>
</div>

<div id="biobut">
<center>
<a href="#bio">Bio</a>
</center>
</div>

<div id="oocbut">
<center>
<a href="#ooc">OOC</a>
</center>
</div>

<div id="credit">
<p align = "right">
Code by Aishurel<br>
<a href="https://pastebin.com/khvm8x8g" target="new">Please steal!</a>
</p>
</div>

<div id="titlebar">
o
</div>

<div id="title">
Vaughn
</div>

<div id="subtitle">
<center>
The riskbreaker
</center>
</div>

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

<div id="borderbox">
stuff
</div>

<div id="textscroll">
<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>
<h3>Age:</h3> 28<br>
<h3>Orientation:</h3> Heterosexual-ish<br>
<h3>Traits:</h3> Calm, Loyal, Lawful, Thorough, Dominant<br>
<h3>Likes:</h3> Children, Dogs, Simplicity, Peace<br>
<h3>Relations:</h3> Single<br>
</div>

<a name="bio"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="left">
<h1>Bio/Background</h1>

<h2>Vaughn</h2>
<hr>
Vaughn is a Valendian of common birth whose family runs a small bakery. He joined the military at the earliest enlistment age and quickly caught the attention of superiors for his loyalty and ability to carry out even morally challenging objectives without prejudice. He was transferred to the Riskbreaker division of the Valendia Knights of the Peace at the age of 23 where he honed his combat and weapons maintenance abilities to meet the requirements of the infamous and unsavory post. Vaughn excels at improvised blacksmithing in the field, using components of scavenged equipment from the corpses of his enemies to craft tools suitable to his covert operations. Creating unique amalgamations with finely-kept edges has become something of a hobby for him as well as a perfect distraction from the stresses of solo Riskbreaker work. Recently he has become disillusioned with his loyalty to the VKP and its objectives. He exhibits a general friendliness to those in need and has a particular weakness for alcohol and women.

<h2>Valendia</h2>
<hr>
A city-state currently ruled by a king with the assistance of the Parliament. A religious organization known as the Priesthood of St. Iocus holds a great deal of political power within Valendia, with several powerful families either acting as their representatives or taking a stand against them. Law is kept in Valendia by the Valendia Knights of the Peace, commonly referred to as the VKP, who are both renowned and feared for their ruthless efficiency. The Priesthood also have a fighting force, a militia known as the Order of the Crimson Blades, under the direct command of its current Cardinal Batistum.

<h2>Riskbreakers</h2>
<hr>
Riskbreakers or the Dangerous Criminal Task Force is the most danger-ridden post in the Valendia Knights of the Peace--tasked to clamp down on serious crimes that threaten to undermine the security of all of society, various criminal organizations and perpetrators boasting significant influence for social upheaval, or major incidents involving state secrets.
<br><br>
Selected from the need of above average fighting ability, and the need for extra quick and precise judgment skills under high stress and pressure situations, Riskbreakers are always powerful fighters and are typically strong enough to work alone on missions, but come to gain their name from facing the immutable low ratio chance of survival at less than 30% and insurmountable odds that come with every mission they are tasked to fulfill. Because of their highly dangerous assignments and work, they have the so-called "license to kill" criminals when circumstances demand, and are taught in a variety of survival skills, including the self maintenance of equipment and armaments.
<br><br>
Though they are supposed to be guardians of the people, years of corruption has degraded them to mere strong-arms who use violence and killers of the government. As a result of the demand for the need for Riskbreakers to be detached from their humanity and individuality, yet still retain morale and spirit, all to continue fighting in the name of patriotism, it is not uncommon for Riskbreakers to have a short career, either dying in the line of duty, or losing their nerve amongst the atrocities one had to commit and retiring altogether. Very few individuals, like Vaughn, however, still manage to continue this line of work.
</p>
</div>
<br>
<a name="ooc"></a>
<div style="width:60%; height: 100%; top: 100px; overflow: auto;" align="left">
<h1>OOC</h1>
<font color = "#C52429">•</font>Room RP heavily preferred<br>
<font color = "#C52429">•</font>No preference between human or non-human feminine types<br>
<font color = "#C52429">•</font>In-room approach will always be most effective<br>
<font color = "#C52429">•</font>PM friendly for socializing and proposals, though<br>
<font color = "#C52429">•</font>Smut is accessory to story/romance and conversation<br>
<font color = "#C52429">•</font>Character image is not my property and will be removed at the request of owning parties<br>
<font color = "#C52429">•</font>Always OOC unless indicated by <font color = "#C52429"><i>Italics and "quotes".</i></font><br>
<font color = "#C52429">•</font>Code is mine. Click the code credit to get the pastebin. Let me know if you need assistance.
</div>
</div>
</div>

<div id="player">
<center>
<audio controls loop><source src="http://orig11.deviantart.net/a043/f/2016/138/4/e/vaughn_music_by_rashayritto-da2xndj.mp3"></audio>
</center>
</div>