Kaisar 1st

<style>

@font-face{
font-family:'Julee';
src:url(https://u4556289.dl.dropboxusercontent.com/s/21mz4j9kz704amx/againts.ttf?dl=0);}

@font-face{
font-family:'Julee2';
src:url(https://u4556289.dl.dropboxusercontent.com/s/d1crxp74pf6m0p3/TreeFTR.ttf?dl=0);}

/* 702929
I'm off the leash
I go to war for peace
Must've been touching everything that I can
I've got blood on my hands */

body {
background-color: #151313;
background-repeat: no-repeat;
background-position: bottom right;
background-size: auto 100%;
background-image: url('http://i.imgur.com/CKDVurW.png');
overflow: hidden;
cursor: default;}

#whole{
position: fixed;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 2px solid black;
overflow: hidden;
background-color: #0c0a0a;
background-image: url('http://i.imgur.com/CKDVurW.png');
}

#whole2{
position: absolute;
height: 1%;
width: 1%;
z-index: 4;
left: 0px;
top: 0px;
opacity: 0;
background: transparent;
overflow: hidden;
transition: all 0s, height 0s 9999s, width 0s 9999s, opacity 0s 9999s;
-webkit-transition: all 0s, height 0s 9999s, width 0s 9999s, opacity 0s 9999s;
}

#audiohide{
position: absolute;
height: 200px;
width: 300px;
border: 1px solid white;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
z-index: 3;
opacity: 0;
overflow: hidden;
}

#audiohide audio{
zoom: 1000%;}


#audiohide:active ~ #middleimage{
transition: all 0s;
-webkit-transition: all 0s;
opacity: 0;}

#audiohide:active ~ #middleimage2{
transition: all 0s;
-webkit-transition: all 0s;
opacity: 1;
}

#audiohide:active ~ #whole2{
left: 100%;
top: 100%;
height: 100%;
width: 100%;
transition: all 0s;
-webkit-transition: all 0s;
opacity: 1;}

#audiohide:active ~ #whole2 #back2{
transition: all 0s;
-webkit-transition: all 0s;
opacity: 0;}

#audiohide:active ~ #whole2 #centertext{
transition: all 0s;
-webkit-transition: all 0s;
opacity: 0;}

#audiohide:active ~ #whole2 #bottomtext{
transition: all 0s;
-webkit-transition: all 0s;
opacity: 0;}

#audiohide:active ~ #whole2 #newborder{
transition: all 0s;
-webkit-transition: all 0s;
opacity: 0;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}

#audiohide:hover ~ #middleimage #middletext,
#audiohide:hover ~ #middleimage2 #middletext{
text-shadow: 1px 1px 10px red;
transition: text-shadow 1s;
-webkit-transition: text-shadow 1s;
}

#middleimage, #middleimage2{
position: absolute;
height: 210px;
width: 300px;
height: 420px;
width: 600px;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
background-image:url(https://i.imgur.com/mRwrfzY.png);
background-image:url(https://i.imgur.com/Wzux8Zs.png);
background-position: center;
background-size: auto 100%;
background-repeat: no-repeat;
z-index: 2;
transition: all 5s 9999s;
-webkit-transition: all 5s 9999s;
}

#middleimage2{
opacity: 0;
transition: all 2s;
-webkit-transition: all 2s;}

#middletext{
position: absolute;
bottom: -170px;
left: -60px;
left: 140px;
margin: auto;
width: 400px;
height: 150px;
text-align: center;
font-size: 27px;
font-family: 'Julee', Times, Arial;
color: transparent;
letter-spacing: 4px;
color: #8f2900;
font-style: italic;
opacity: .6;
line-height: 40px;
text-shadow: 1px 1px 5px black;
transition: all 1s;
-webkit-transition: all 1s;
}

#back2{
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background-image:url(https://i.imgur.com/SKUDH1w.png);
background-position: top right -5vw;
background-size: auto 130%;
background-repeat: no-repeat;
transition: all 2s 1s;
-webkit-transition: all 2s 1s;
opacity: 1;}

#back2{
background-image:url(https://i.imgur.com/bPiOemv.png);
background-size: auto 100%;}

#centertext{
position: absolute;
bottom: 10vw;
left: 10%;
height: 100px;
width: 650px;
max-width: 70%;
font-size: 17px;
font-family: 'Julee', Times, Arial;
color: transparent;
letter-spacing: 9px;
color: #8f2900;
font-style: italic;
opacity: .7;
text-align: right;
line-height: 40px;
opacity: 1;
transition: all 3s 2s;
-webkit-transition: all 3s 2s;
text-shadow: 1px 1px 5px black;
}

#bottomtext{
position: absolute;
top: 85px;
right: 0px;
width: 380px;
height: 70px;
background: transparent;
border-top: 2px solid #7e200b;
font-family:'Julee2';
font-size: 15px;
color: #585858;
text-shadow: 1px 1px 4px black;
text-align: left;
font-style: normal;
font-weight: 800;
line-height: 35px;
text-indent: 10px;
letter-spacing: 5px;
opacity: 1;
transition: all 2s 3.2s;
-webkit-transition: all 2s 3.2s;}

#newborder{
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 2px solid #e1840e;
opacity: 1;
transition: all 2s 0s;
-webkit-transition: all 2s 0s;}

</style>

<div id="audiohide">
<audio controls src="http://k003.kiwi6.com/hotlink/jbl5g1yx2j/Rexx_Life_Raj_-_Handheld_GPS_VOL.mp3" loop=3 >
</audio>
</div>

<div id="middleimage">
<div id="middletext">
I'm off the leash<br>
I go to war for peace</div>
</div>

<div id="middleimage2">
<div id="middletext">
I'm off the leash<br>
I go to war for peace</div>
</div>

<div id="whole">
</div>

<div id="whole2">
<div id="newborder">
</div>
<div id="back2">
</div>
<div id="centertext">
Must've been touching everything that I can<br>I've got blood on my hands
<div id="bottomtext">
KAISAR. 8'2". male. dragon. pansex.
</div>
</div>
</div>