LoR

<style>

@import url('https://fonts.googleapis.com/css?family=Cinzel');

::-webkit-scrollbar
{
	width: 10px;
	background-color: transparent;
}


body {
background-color:#3b0b1f;
overflow:hidden;
}

#image{
background-image:url('http://i.imgur.com/66iIIYG.png');
background-size:100%;
background-repeat:no-repeat;
width:300px;
height:450px;
position:absolute;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-225px;
filter:grayscale(100%);
transition:1s ease-in-out;
transition-delay:999999s;
z-index:9;
}

body:hover > #image {
filter:grayscale(0%);
transition-delay:1s;
margin-left:0px;
}

#flame{
background-image:url('http://i.imgur.com/LNNgliM.png');
background-size:100%;
background-repeat:no-repeat;
width:172px;
height:450px;
position:absolute;
top:50%;
left:50%;
margin-left:-31px;
margin-top:-212px;
animation:flame 3s infinite;
z-index:10;
}

@keyframes flame {
0% { -webkit-filter: brightness(100%);
}
20% {-webkit-filter: brightness(150%);
}
25% {-webkit-filter: brightness(200%);
}
35% {-webkit-filter: brightness(150%);
}
40% {-webkit-filter: brightness(100%);
}
45% {-webkit-filter: brightness(130%);
}
55% {-webkit-filter: brightness(100%);
}
60% {-webkit-filter: brightness(150%);
}
65% {-webkit-filter: brightness(200%);
}
75% {-webkit-filter: brightness(80%);
}
85% {-webkit-filter: brightness(160%);
}
90% {-webkit-filter: brightness(150%);
}
100% {-webkit-filter: brightness(100%);
}
}

#box{
width:400px;
height:100px;
background-color:#fcfad2;
position:absolute;
top:50%;
left:50%;
margin-top:-40px;
margin-left:-0px;
z-index:5;
opacity:0;
transition:1s;
transition-delay:999999s;
}
body:hover > #box{
opacity:1;
transition-delay:1s;
margin-left:-160px;
}

#navi1{
width:25px;
height:25px;
background-color:#EBEBEB;
position:absolute;
top:50%;
left:50%;
margin-top:-30px;
margin-left:30px;
z-index:15;
opacity:0;
transition:1s;
transition-delay:999999s;
}

body:hover > #navi1
{
opacity:1;
transition-delay:1.5s;
}

#navi1 a{
opacity:1;
 display:inline-block;
 width:25px;
 height:25px;
 background-color:transparent;
z-index:16;
transition:1s;
color:transparent;
text-decoration:none;
font-family: 'Cinzel', serif;
font-size:14pt;
text-align:center;
}

#navi1 a:hover{
background-color:#000;
color:#fff;
text-decoration:none;
font-family: 'Cinzel', serif;
font-size:14pt;
text-align:center;
}

#navi2{
width:25px;
height:25px;
background-color:#000;
position:absolute;
top:50%;
left:50%;
margin-top:-30px;
margin-left:60px;
z-index:15;
opacity:0;
transition:1s;
transition-delay:999999s;
}

body:hover > #navi2
{
opacity:1;
transition-delay:1.7s;
}

#navi2 a{
opacity:1;
 display:inline-block;
 width:25px;
 height:25px;
 background-color:transparent;
z-index:16;
transition:1s;
color:transparent;
text-decoration:none;
font-family: 'Cinzel', serif;
font-size:14pt;
text-align:center;
}

#navi2 a:hover{
background-color:#fff;
color:#000;
text-decoration:none;
font-family: 'Cinzel', serif;
font-size:14pt;
text-align:center;
}

#navi3{
width:25px;
height:25px;
background-color:#000;
position:absolute;
top:50%;
left:50%;
margin-top:0px;
margin-left:30px;
z-index:15;
opacity:0;
transition:1s;
transition-delay:999999s;
color:transparent;
}

body:hover > #navi3
{
opacity:1;
transition-delay:1.9s;
}

#navi3 a{
opacity:1;
 display:inline-block;
 width:25px;
 height:25px;
 background-color:transparent;
z-index:16;
transition:1s;
color:transparent;
text-decoration:none;
font-family: 'Cinzel', serif;
font-size:14pt;
text-align:center;
}

#navi3 a:hover{
background-color:#fff;
color:#000;
text-decoration:none;
font-family: 'Cinzel', serif;
font-size:14pt;
text-align:center;
}

#navi4{
width:25px;
height:25px;
background-color:#EBEBEB;
position:absolute;
top:50%;
left:50%;
margin-top:0px;
margin-left:60px;
z-index:15;
opacity:0;
transition:1s;
transition-delay:999999s;
}

body:hover > #navi4
{
opacity:1;
transition-delay:2.1s;
}



#navi4 a{
opacity:1;
 display:inline-block;
 width:25px;
 height:25px;
 background-color:transparent;
z-index:16;
transition:1s;
color:transparent;
text-decoration:none;
font-family: 'Cinzel', serif;
font-size:14pt;
text-align:center;
}

#navi4 a:hover{
background-color:#000;
color:#fff;
text-decoration:none;
font-family: 'Cinzel', serif;
font-size:14pt;
text-align:center;
}

#one{
width:190px;
height:90px;
position:absolute;
top:0px;
left:0px;
background-color:transparent;
opacity:1;
z-index:6;
font-family: 'Cinzel', serif;
font-size:6pt;
overflow:auto;
color:#3b0b1f;
padding:5px;
}

#two, #three, #four{
width:190px;
height:90px;
position:absolute;
top:0px;
left:0px;
background-color:transparent;
opacity:0;
z-index:5;
overflow:auto;
font-family: 'Cinzel', serif;
font-size:6pt;
color:#3b0b1f;
}

#two:target, #three:target, #four:target{
width:190px;
height:90px;
position:absolute;
top:0px;
left:0px;
background-color:#fcfad2;
opacity:1;
z-index:7;
font-family: 'Cinzel', serif;
padding:5px;
text-align:left;
}

table{
font-family: 'Cinzel', serif;
font-size:6pt;
color:#3b0b1f;
}



h2{
background-color:#3b0b1f;
width:80px;
height:20px;
font-family: 'Cinzel', serif;
font-size:10pt;
color:#fcfad2;
text-align:center;
position:absolute;
margin-top:5px;
left:0px;
}

h1{
font-family: 'Cinzel', serif;
font-size:20pt;
color:#fcfad2;
position:absolute;
top:50%;
left:50%;
transition:1s;
transition-delay:99999s;
margin-top:-68px;
margin-left:-300px;
opacity:0;
z-index:11;
}

body:hover > h1{
margin-top:-68px;
margin-left:-150px;
transition-delay:1s;
opacity:1;
}

</style>

<div id="image">
<div id="flame">
</div>
</div>
<h1>Lancer of Red</h1>
<div id="box">

<div id="one">
<h2>OOC </h2>
<br><br><br>
<b>00</b> Code is mine, if you have inquiries about commissions don't be afraid to send me a PM.<br>
<b>01</b> Character is from the fate universe. Crossover acceptable. <br>
<b>02</b>PM Friendly to an extent. <br>
<b>03</b>Scroll using the scroll wheel on your mouse or the arrow keys.<br>
<b>04</b>Outside info is possible, but only on discord, get that skype outta here, shit's whack.<br>
<b>05</b>Character may be a little wicked, that doesn't mean I am, I'm actually a pretty swell dude to talk to.<br>
<b>06</b>Smut will only happen through character development and to be honest this character may already be attached.<br>
<b>07</b>Criticism is always welcome on writing and coding.<br>
<b>08</b>Have fun.<br>
</div>

<div id="two">
<h2>Stats </h2>
<br><br><br>
<table width="80%"; table align="left">
<font style="float:left"><b>Name</b></font> <font style="float:right">Karna</font><br>
<font style="float:left"><b>Class</b></font> <font style="float:right">Lancer</font><br>
<font style="float:left"><b>Alias</b></font> <font style="float:right">Lancer of Red, Hero of Charity</font><br><br>
<font style="float:left"><b>Age</b></font> <font style="float:right">Early 20s</font><br>
<font style="float:left"><b>Place of Birth</b></font> <font style="float:right"> Pandava</font><br><br>
<font style="float:left"><b>Hair Color</b></font> <font style="float:right">Platinum</font><br>
<font style="float:left"><b>Eye Color</b></font> <font style="float:right">Right: Blue Left: Green</font><br>
<font style="float:left"><b>Body Type</b></font> <font style="float:right">Slim Fit</font><br><br>
<font style="float:left"><b>Personality</b></font> <font style="float:right">Cold, Unforgiving, Loyal</font><br>
<font style="float:left"><b>Orientation</b></font> <font style="float:right">Heterosexual</font><br>
<font style="float:left"><b>Paramour</b></font> <font style="float:right">Single</font><br><br>
<font style="float:left"><b>Faction</b></font> <font style="float:right">Red</font><br>
</table>
</div>

<div id="three">
<h2>Biography </h2>
<br><br><br>
thing3
</div>

<div id="four">
<h2>Abilities </h2>
<br><br><br>
thing4
</div>


</div>
<div id="navi1">
<a href="#two">🗡</a>
</div>
<div id="navi2">
<a href="#three">🖋</a>
</div>
<div id="navi3">
<a href="#four">🖋</a>
</div>
<div id="navi4">
<a href="#one">🗡</a>
</div>