<style type="text/css">
@import url(//fonts.googleapis.com/css?family=Permanent+Marker);
@import url(//fonts.googleapis.com/css?family=Courgette);
@import url(//fonts.googleapis.com/css?family=Oswald);
@import url(//fonts.googleapis.com/css?family=Comfortaa);
@import url(//fonts.googleapis.com/css?family=Poppins);
@import url(//fonts.googleapis.com/css?family=Sedgwick+Ave);
@import url(//fonts.googleapis.com/css?family=Poiret+One);


/*body*/
body{
 background-color: #000000;
}

body, a {cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur829.cur), auto;}


/*scroll*/
::-webkit-scrollbar {
 width: 5px;
 height: 0px;
 background:;
 }

 ::-webkit-scrollbar-thumb {
 background-color: #9a90a9;
 -webkit-border-radius: 10px;
 border-radius: 10px;
z-index: 999;
 }


b, strong { font-family: Comfortaa; font-size: 12px;line-height: 15px; font-weight: bold;
 color: #703883;
}

i, em {color:#753132; font-family: Sedgwick Ave; font-size:12px;}

/*link*/
a:link,a:active,a:visited {
 color: #352152;
 font-family: courgette;
 font-size: 12px;
 line-height: 10px;
 letter-spacing: 0px;
 display: ;
 font-weight: bold;
 margin-bottom: px;
 word-spacing: 0px;
 text-transform: none;
 text-align: center;
 text-decoration: none;
 transition: all .3s ease-in-out;
 -webkit-transition: all .3s ease-in-out;
 -moz-transition: all .3s ease-in-out;
 -o-transition: all .3s ease-in-out;
 -ms-transition: all .3s ease-in-out;
 z-index: 7;
 }

 a:hover {
 color: #352152;
text-shadow: 1px 0px 0px #64723d,
 0px 1px 0px #64723d,
 -1px 0px 0px #64723d,
 0px -1px 0px #64723d,
 0px 0px 20px #64723d;
 font-family: courgette;
 font-size: 12px;
 line-height: 10px;
 letter-spacing: 0px;
 display: ;
 font-weight: bold;
 margin-bottom: px;
 word-spacing: 0px;
 text-align: center;
 text-decoration: none;
 transition: all .3s ease-in-out;
 -webkit-transition: all .3s ease-in-out;
 -moz-transition: all .3s ease-in-out;
 -o-transition: all .3s ease-in-out;
 -ms-transition: all .3s ease-in-out;
}


/*aesthetics*/
#joker img{
position: fixed;
max-width: auto;
max-height: 80vh;
top:34%;
left: 75%;
z-index: 3;
}

#name{
 position:fixed;
 width: 10vw;
 height:1vh;
 top:14.4%;
 left: 35%;
 font-family: 'Permanent Marker', cursive;
 font-size: 90px;
 color: #703883;
  text-shadow:  0 0 40px #64723d , 0 0 70px #64723d , 0 0 80px #64723d , 0 0 100px #64723d ;
opacity: 1;
z-index: 4;
}


#square{
position: fixed;
top:25%;
left: 26%;
width: 30vw;
height:50vh;
border: 7px #703883 solid;
box-shadow: -1px 0px 34px 0px rgba(100,114,61,1);
opacity: 1;
z-index: 5;
}



/*navigation*/
#navi {
 position: fixed;
 left:28%;
 top:79%;
 text-align:center;
 color: white;
 width: 50vw;
 height: 20px;
 padding:5px;
 line-height:7px;
 z-index: 6;
display: inline-block;
 float: left;

 }

 #navi a:link, #navi a:visited {
 text-decoration:none;
 font-weight:normal !important;
 padding:5px;
 top: 10px;
 margin-left: 8px;
 width: 5vw;
height: 0.8vh;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
 background-color: #703883;
 float: left;
 }

 #navi a:hover {
 background-color:#64723d;

 text-decoration:none;
 float: left;
 }

/*content*/
.box {
 position: fixed;
 width: 30vw;
 height:44vh;
 top: 30%;
 left: 26.2%;
 padding: 5px;
 font-size: 12px;
 line-height: 13px;
 text-align: center;
font-family: 'Oswald';
 color: #ffffff;
 overflow: auto;
 opacity: 0;
 transition: all 0.7s ease-in-out;
 -webkit-transition: all 0.7s ease-in-out;
 -moz-transition: all 0.7s ease-in-out;
 -o-transition: all 0.7s ease-in-out;
 -ms-transition: all 0.7s ease-in-out;
 z-index:2;
 }

 .box:target {
 top: 30%;
 left: 26.2%;
 overflow: auto;
background-color: #transparent;
 opacity: 1;
 transition: all 0.7s ease-in-out;
 -webkit-transition: all 0.7s ease-in-out;
 -moz-transition: all 0.7s ease-in-out;
 -o-transition: all 0.7s ease-in-out;
 -ms-transition: all 0.7s ease-in-out;
 z-index:8;
 }

/*tables*/
td.one{
 width: 661px;
 font-family: Comfortaa;
 font-size: 12px;
 text-align: left;
 word-spacing: 1px;
 letter-spacing: 0px;
 line-height: 9px;
 font-weight: bold;
 color: #703883;
}

 td.two{
 width: 661px;
 font-family: Oswald;
 font-size: 12px;
 text-align: right;
 word-spacing: 1px;
 letter-spacing: 0px;
 line-height: 9px;
 color: #ffffff;
 }

/*music*/
#music1{
 position:fixed;
left: 32%;
top: 23%;
 padding:2px;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
z-index: 4;
}

#music1:hover #music2{
 opacity:0;
 margin-top:-25px;
 z-index:-1;
}

#music1:hover #music3{
 opacity:1;
 margin-top:-2px;
 z-index:99;
}

#music1:hover #musiclist{
 opacity:1;
}

#music2{
 /* First gif image*/
 opacity:1;
 background-color:#transparent;
 padding:6px;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;}

#music3{
 /* Music player */
 opacity:0;
 position:fixed;
 background-color:#transparent;
 background-image:
 url('http://assets.clickmotive.com/Designs/LEMidnight/playButton.png');
 background-repeat: no-repeat;
 background-size: 25px;
 width:25px;
 height:25px;
 z-index:99
 margin-left:0px;
 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;}

h1 {
font-family: Poiret One;
color: #703883;
text-shadow: 1px 0px 0px #5d6534,
    0px 1px 0px #5d6534,
    -1px 0px 0px #5d6534,
    0px -1px 0px #5d6534,
    0px 0px 20px #5d6534;
font-size: 15px;
line-height: 12px;
text-align: center;
letter-spacing: 1px;
border-bottom: 1px solid #5d6534;
}
</style>
<div id="joker"><img src="http://i.picpar.com/xoLc.jpg"></div><div id="name">Rokej</div><div id="square"></div>

<div id="navi">
 <a href="#one"></a>
 <a href="#two"></a>
<a href="#three"></a>
<a href="#four"></a>
</div>

<div id="one" class="box">
<h1>Stats</h1>
 <table>
<tr><td class="one">
Height
 </td><td class="two">
6'5"
 </td></tr><tr>

 <tr><td class="one">
Weight
 </td><td class="two">
195 Lbs
 </td></tr><tr>

 <tr><td class="one">
Eyes
 </td><td class="two">
Green
 </td></tr><tr>

 <tr><td class="one">
Hair
 </td><td class="two">
Green
 </td></tr><tr>

<tr><td class="one">
Skin
 </td><td class="two">
White
 </td></tr><tr>


<tr><td class="one">
Sexual
 </td><td class="two">
Heteroflexible
 </td></tr><tr>

<tr><td class="one">
Marital
 </td><td class="two">
Single
 </td></tr><tr>

</table>
 </div>

 <div id="two" class="box">
<h1>Quirks:</h1>
x The Joker, known now by Batman and those he associated with as Rokej, often hates being called Joker.<br>
x Despite his progress with rehabilitation, he still has bouts of laughter, varying from slight to aggressive.<br>
x Harleen Quinzel remains his soft spot. She could be the key to his salvation, or what makes him spiral into chaos again.<br>
x He occasionally talks to himself, though only in soft murmurs.<br>
x He has picked up smoking as a means of relaxing, and coping with his crimes.<br>
x Though he has been rehabilitated to fit into 'normal' society, he still shows symptoms.<br>
 </div>

<div id="three" class="box">

<h1>OOC:</h1>

regular <b>bold</b> <i>italics</i> <a href="">link</a><br><br>


<i>1.</i> This is an AU take on Joker, don't like it? Don't write with it.<br>
<i>2.</i> Friendly PM wise, and PM-RP wise.<br>
<i>3.</i> Outside contact available upon request.<br>
<i>4.</i> No one gets special treatment based strictly on character. Come one, come all.<br><br>

This profile was commissioned <i>Rokej</i> only. No other persons is allowed to take pieces of and/or redistribute any coding. Created by <b>Vaeldra</b>.
 </div>

<div id="music1">
<div id="music2">


<img src="https://78.media.tumblr.com/tumblr_m9c4n3fEGd1rto88t.gif" style="opacity: 1;"></div>

<div id="music3">
<Div style="margin-top:4px;">

<audio controls style="opacity: 0;"><source src="https://my.mixtape.moe/zlabgg.mp3
"></audio>
</div>

</div>