Noct Code by Blackbird

<style>@import url('https://fonts.googleapis.com/css?family=Spectral+SC|Julius+Sans+One');

body{
background-color:#000;
}

::-webkit-scrollbar {
width: 3px;
height: 0px;
background:transparent;
}
::-webkit-scrollbar-thumb {
background-color:rgba(255,255,255,.18);
-webkit-border-radius: 5px;
border-radius: 5px;
}
::selection {
color: #777;
background: #333;
}

.flat{
height:300px;
width:500px;
position:fixed;
left:689px;
bottom:164px;
overflow:hidden;
opacity:1;
background-image:url(https://static.tumblr.com/9951ca2e7e884a48ca5b5269f5514cd6/lycuamb/jw3onle7s/tumblr_static_filename_640_v2.gif);
background-size: 105%;
background-repeat: no-repeat;
filter:hue-rotate(190deg);
background-position:center;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

body:hover .flat{
border: 1px solid #111;
outline: 1px solid #1a1a1a;
outline-offset: 3px;
}

.noct{
opacity:0;
height:300px;
width:500px;
position:fixed;
left:691px;
bottom:165px;
overflow:hidden;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

body:hover .noct{
opacity:.3;
filter:brightness(100%);
background-image:url(https://m.popkey.co/e952f9/gakkY.gif);
background-repeat:no-repeat;
background-size:100%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;

}

.center{
width: 480px;
height: 280px;
background-color:rgba(255,255,255,.05);
position: fixed;
left: 690px;
bottom: 165px;
padding:10px;
color:#fff;
font-family: 'Spectral SC', serif;
text-align:center;
font-size:10px;
text-shadow:0px 0px 2px #000;
opacity:0;
z-index:99;
overflow:auto;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 1.7s ease-in-out;
}

body:hover .center{
opacity:1;
transition-delay:.8s;
}

.triage{
position:fixed;
margin:auto;
left:910px;
bottom:122px;
width:48px;
height:48px;
opacity:1;
transform:rotate(45deg);
border:10px solid #326fd1;
z-index:999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

body:hover .triage{
transform:rotate(135deg);
filter: brightness(30%);
opacity:1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.square{
position:fixed;
margin:auto;
left:925px;
bottom:137px;
width:38px;
height:38px;
opacity:1;
transform:rotate(45deg);
background-color:#222;
z-index:999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

body:hover .square{
transform:rotate(135deg);
filter: brightness(100%);
opacity:1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all .8s ease-in-out;
}


.text1{
color:#fefefe; font-family: 'Julius Sans One', sans-serif; font-size:47px; position:fixed; left:682px; bottom:125px; z-index:1001;
text-shadow:-1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 1.8s ease-in-out;
}

body:hover .text1{
color:#ccc;
text-shadow:-1px 0 #4d8ff9, 0 1px #4d8ff9, 1px 0 #4d8ff9, 0 -1px #4d8ff9;
bottom:465px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 1.4s ease-in-out;
}
</style><div style="position:fixed; bottom:0px; left:300px;"><img src="http://static.tumblr.com/fbfa48d5295e1fdd362986c1022ecf47/dii4lo2/VRYn2plkl/tumblr_static_noctis-render.png"></div>

<div class="text1">Noctis Lucis Caelum</div>

<div class="center">
"Heir apparent to the Lucian throne, Noctis's trials begin when he sets forth from the crown city in order to wed Lunafreya Nox Fleuret. In combat, he wields spectral weapons which he forges from thin air, a power possessed by those of his royal line."<br><br><br>[ under construction ]<br><br>
PM Friendly. One-liner to multi-para. Snowballs mostly.<br><br>



</div>
<div class="flat"></div>
<div class="noct"></div>

<div class="triage"></div><div class="square"></div>
<div class="center" style="position:fixed; bottom:15px; height:80px; border: 1px solid #111; outline: 1px solid #1a1a1a;outline-offset: 3px; padding-top:40px">[ friends / party list ]</div>