odd

<style>
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker|Courier+New:300');
body {
background: url("http://i66.tinypic.com/2ajqexx.jpg");
background-repeat:no-repeat;
background-position:top center;
background-attachment:scroll;
background-size:300% 300%;
overflow-x: hidden;
 overflow-y: scroll;
}
body::-webkit-scrollbar {
 display: none;
}





.brk {
 position: sticky;
 top: -56vh;
}

.brk img {
 height: 4.5vh;
 width: 82vh;
 position: absolute;
 margin-left: 50%;
 margin-top: 56vh;
 transform: translate(-50%);
 z-index: -2;
 top: 0vh;
}

.img img {
 height: 30vh;
 width: 30vh;
 border-radius: 50%;
 left: 50%;
 position: absolute;
 transform: translate(-50%);
 top: 7vh;
 z-index: 2;
 pointer-events: none;
 filter: hue-rotate(340deg) brightness(1);
}

img::selection {
 display: none;
}

.diamond {
 background: url("http://i67.tinypic.com/s2rtqu.png");
background-size:200% 200%;
 position: absolute;
 height: 30vh;
 width: 30vh;
 left: 50%;
 top: 7vh;

 transform: translate(-50%) rotate(45deg);
 z-index: 1;
 transition: ease .5s;
 animation: dance 18s ease 0s infinite;
}


@keyframes dance {
 0% { transform: translate(-50%) rotate(45deg); height: 30vh; width: 30vh; }
 5% { transform: translate(-50%) rotate(45deg); height: 25vh; width: 25vh; margin-top: 2.5vh; }
 10% { transform: translate(-50%) rotate(0deg); height: 25vh; width: 25vh; margin-top: 2.5vh; }
 15% { transform: translate(-50%) rotate(0deg); height: 31vh; width: 31vh; margin-top: -.5vh; }
 16.5% { transform: translate(-50%) rotate(0deg); height: 30vh; width: 30vh; margin-top: 0vh;}
 20% { transform: translate(-50%) rotate(-13deg); height: 30vh; width: 30vh; margin-top: 0vh; }
 25% { transform: translate(-50%) rotate(-13deg); height: 30vh; width: 30vh; margin-top: 0vh; }
 30% { transform: translate(-50%) rotate(13deg); height: 30vh; width: 30vh; margin-top: 0vh; }
 35% { transform: translate(-50%) rotate(-45deg); height: 30vh; width: 30vh; margin-top: 0vh; }
 40% { transform: translate(-50%) rotate(-13deg); height: 10vh; width: 10vh; margin-top: 10vh; }
 45% { transform: translate(-50%) rotate(45deg); height: 30vh; width: 30vh; margin-top: 0vh; }
 95% { transform: translate(-50%) rotate(45deg); height: 30vh; width: 30vh; margin-top: 0vh; }
 }

 .title {
 font-family: Permanent Marker;
 color: #ffdb00;
 font-size: 4vh;
 left: 50%;
 transform: translate(-50%);
 position: absolute;
 width: 100vh;
 text-align: center;
 top: 49vh;
 }

 .content {
 font-size: 2vh;
 padding: 0;
 position: absolute;
 left: 50%;
 transform: translate(-50%);
 top: 62vh;
 width: 55vh;
 font-family: Courier New;
 color: #ffdb00;
 font-weight: bold;
 word-wrap: break-word;
 text-align: center;
 float: none;
 }

 .content img {
 float: center;
 padding-right: 2vh;
 border-radius: 20%;
 filter: drop-shadow(0vh 0vh 1vh #F0BD44);
 }
 #bubble {
 position:absolute;
 background-color:#06050a;
 border-radius:200px;
 width:70px;
 height:70px;
 left:230px;
 top:50px;
 }

 #arrow {
 position:absolute;
 color:#06050a;
 font-size:50px;
 left:-20px;
 top:10px;
 }

 #music-note {
 position:absolute;
 left:20px;
 top:22px;
 }

 #music-note img {
 width:27px;
 }

</style>


<div class="content">

Odyssey, a.k.a. Odd<br>
Twenty-seven years of age (Eternal)<br>
5’11”<br>
175lbs<br>
Pansexual, panromantic<br>
Chaotic good<br>
Poltergeist<br><br>

Standoffish and territorial, is never afraid to start conflict. Leader type. Has an underlying sense of loneliness and melancholy to his demeanor.<br><br>

Carries a rifle around his shoulder, along with a bag of miscellaneous items on his back. Usually sports a camouflage bomber jacket with a yellow undershirt, along with black boot-cut jeans and combat boots.<br><br>

<br>
<img src="http://i66.tinypic.com/o6zn02.jpg">
<br>

The leader of the Banditos, a group of vigilantes who aim to liberate the people of a fascist-organized city called the Tower of Silence, or DEMA. The city is surrounded by walls, and ruled by nine people called the Bishops. Odd was one of the people who managed to escape. This put a bounty on his head, and now he’s watching his back. Every once in a while, he returns to Dema for meetings with his crew. If you befriend him, you'll find Odyssey is a pleasant person to be around. While he is headstrong and standoffish, he cares for his loved ones like no other. He's understanding, and doesn't break his promises.<br><br>

Odd is trained in many forms of martial arts, both offensive and defensive. Taekwondo, Mixed Martial Arts, Kickboxing and Judo are a few examples. He can also handle any weapon he's given with expert dexterity and skill. He's incredibly agile, even with his rifle and his bag on him. When he's not fighting, Odd can usually be found writing songs and playing the piano.<br><br>

<b><i>Friends:</b></i><br><br>
Maybe you? <br><br>

<b>Out of Character:</b> IC is not OOC. This character isn't made for smut, but it can happen if a relationship is built. Outside contact can be given if asked, but I'm selective about that. I have narcolepsy, so if I disappear on you assume I've fallen asleep.<br><br>


</div>
<div class="title"><b>I'll morph to someone else.</b></div>
<div id="bubble">
<div id="arrow">
◄
</div>

<div id="music-note">
<img src="http://i.imgur.com/r6klgBG.gif">
</div>

<div id="music-player">
<Div style="margin-top:4px;">
<audio controls style="opacity: 0; width:150px; margin-top:10px; margin-left:10px;">
<source src="http://dl.dropboxusercontent.com/s/qoqpv0h4i66mq4c/Twenty%20One%20Pilots%20-%20Morph%20%28Lyrics%29.mp3?dl=0">
</audio>
</div>
</div>
</div>
<div class="rock"></div>
<div class="brk">
 <img src="https://t0.rbxcdn.com/1c2f69c7d13b65e84662e4d3215a4c44">
</div>

<div class="img">
 <img src="http://i64.tinypic.com/28rdqhf.jpg">
</div>

<div class="diamond"></div>