When Star Breaks Things Episode 3

<script defer>
window.onload = function() {
var isCtrl = false;
document.onkeyup=function(e)
{
 if(e.which == 17)
 isCtrl=false;
}
document.onkeydown=function(e)
{
 if(e.which == 17)
 isCtrl=true;
 if((e.which == 85) || (e.which == 67) && (isCtrl == true))
 {
 return false;
 }
}
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
 return false;
}
function mousehandler(e){
 var myevent = (isNS) ? e : event;
 var eventbutton = (isNS) ? myevent.which : myevent.button;
 if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;

 if (document.addEventListener) { // IE >= 9; other browsers
 document.addEventListener('contextmenu', function(e) {
 alert(" Try asking for the code instead."); //here you draw your own menu
 e.preventDefault();
 }, false);
 } else { // IE < 9
 document.attachEvent('oncontextmenu', function() {
 alert("O sun, abide to death.");
 window.event.returnValue = false;
 });
 }
};
</script>
<style type="text/css">
@font-face {
 font-family: big;
 src: url(https://dl.dropbox.com/s/pnldy974a66resp/Big%20Stomach.ttf?dl=0);
}

::-webkit-scrollbar-button:vertical:{
background-color: #transparent;}

::-webkit-scrollbar-thumb:vertical {
background-color:#transparent;
height:150px;}

::-webkit-scrollbar-thumb:horizontal {
background-color:#transparent;
height:60px;}


::-webkit-scrollbar {
height:60px;
width:5px;
background-color:#transparent;}

body {
background: #261726;
background-image: url("https://i.imgur.com/4E58yqy.png");
}

#bar {
position: absolute;
background:url('https://cdn.domestika.org/c_fill,dpr_1.0,h_1200,t_base_params.format_jpg,w_1200/v1538568699/project-covers/000/432/026/432026-original.jpg?1538568699');
left: 0vw;
top: 31vh;
width: 100%;
height: 40vh;
background-color: #483048;
z-index: 1;
}
#container {
position: absolute;
background-size:cover;
top: 15vh;
left:3vw;
width: 94vw;
height: 68vh;
border: solid #000 5px;
background-color: #483048;
z-index: 1;

}

h1 { text-decoration: none;
  text-align:center;
  background-color: #a171b8;
	color: #f7f1fe;
	font-family: 'open sans condensed', sans serif;
  font-size: 13px;
  font-weight: none;
  display-inline: block;
  text-transform: uppercase;
  letter-spacing: 1px;
	padding: 0px;
  opacity: .8
  }

.ooc {
position: absolute;
padding:1vw;
width: 18vw;
height: 55vh;
overflow: auto;
left: 1vw;
top: .8vw;
font-family: 'Kiona';
color: #cec9c3;
background-color: #483048;
border: solid #000 1px;
}
.stats {
  text-align:right;
position: absolute;
padding:1vw;
width: 18vw;
height: 55vh;
overflow: auto;
left: 1vw;
top: .8vw;
font-family: 'Kiona';
color: #cec9c3;
background-color: #483048;
border: solid #000 1px;
}

.friends {
  text-align:right;
position: absolute;
padding:1vw;
width: 18vw;
height: 19vh;
overflow: auto;
left: 1vw;
top: 1vw;
font-family: 'Kiona';
color: #cec9c3;
background-color: #483048;
border: solid #000 1px;
}

.content1 {
position: absolute;
background-size:cover;
top: 1.2vw;
left: 2vw;
width: 22vw;
height: 63vh;
border: solid #000 2px;
background-color: #cec9c3;
background-image: url('https://media1.giphy.com/media/xT0BKgjkd3OyqpCjJK/source.gif');
background-size: fill;
background-position: center;
background-repeat: no-repeat;
z-index: 2;
}

.content2 {
position: absolute;
background-size:cover;
top: 1.2vw;
left: 25vw;
width: 22vw;
height: 63vh;
border: solid #000 2px;
background-color: #cec9c3;
background-image: url('https://media1.giphy.com/media/xT0BKgjkd3OyqpCjJK/source.gif');
background-size: fill;
background-position: center;
background-repeat: no-repeat;
z-index: 2;
}

.friendz {
position: absolute;
background-size:cover;
bottom: .9vw;
left: 48vw;
width: 22vw;
height: 27vh;
border: solid #000 2px;
background-color: #cec9c3;
background-image: url('https://media1.giphy.com/media/xT0BKgjkd3OyqpCjJK/source.gif');
background-size: fill;
background-position: center;
background-repeat: no-repeat;
z-index: 2;
}

#pic {
position: fixed;
top: -2vw;
right: 10vw;
width: 17.3vw;
height: 15vw;
padding: 10px;
background-color: transparent;
z-index: 5;
}
b {
  color: #fff;
  font-weight: bold;
  letter-spacing: 0;
}


.title { background: transparent;
background-size:200%;
background:url('https://media1.giphy.com/media/xT0BKgjkd3OyqpCjJK/source.gif') repeat;
background-position: center;
position: absolute;
font-family: 'big';
font-size: 3.5vw;
left: 710px; bottom:68px;
width: 55vw;
height: 15vw;
text-align: justify;
padding:5px 5px 5px 5px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
text-shadow: 2px 2px #000000;
z-index: 3;}

</style>
<div class="title">Maebh Jewelle</div>
<div id="pic"><img src="https://i.picpar.com/gr2e.png"></img></div>
<div id="bar"></div>

<div id="container">
<div class="content1">
<div class="ooc"> <h1>Out of Mana</h1>
 01. IC =/= OOC.
 <br><br>02. Smut is more likely with story, but I am not against it otherwise.
 <br><br>03. PM Friendly.
 <br><br>04. Typist is forgetful, so save posts.
 <br><br>05. 9 years RP experience, 4 on RPC.
 <br><br>06. Discord is earned.
 <br><br>07. Anything else that does not belong to me is the rightful property of their creators, etc. etc.
 <br><br>08. Any questions, comments or concerns? Please don't hesitate to PM me.</div></div>

<div class="content2">
<div class="stats">
<h1>statisical information</h1><b style="float: left; width: 20%;">name</b><b>▌</b> Amrynth Heavensward<br>
 <b style="float: left; width: 20%;">alias</b><b>▌</b> Am, Ammy<br>
 <b style="float: left; width: 20%;">gender</b><b>▌</b> Female, very.<br>
 <b style="float: left; width: 20%;">sexuality</b><b>▌</b> Open<br>
 <b style="float: left; width: 20%;">marital</b><b>▌</b> Single<br>
 <b style="float: left; width: 20%;">species</b><b>▌</b> Draconis Holinus<br>
 <b style="float: left; width: 20%;">racial</b><b>▌</b> Humanoid (Maybe?)<br>
 <b style="float: left; width: 20%;">origin</b><b>▌</b> Unknown<br>
 <b style="float: left; width: 20%;">quirk</b><b>▌</b> Only speaks dragon-tongue<br>
 <b style="float: left; width: 20%;">marks</b><b>▌</b> <a title="Two dots under each eye, just a little off to the side.">Tattooing</a>, <a title="EThere are three earrings between her two ears; each one contains little runic engravings upon them. What the runes say, only she knows.">Piercings</a>
 <b style="float: left; width: 20%;">height</b><b>▌</b> 5'7"<br>
 <b style="float: left; width: 20%;">weight</b><b>▌</b> 170lbs<br>
 <b style="float: left; width: 20%;">body</b><b>▌</b> Hourglass, fit<br>
 <b style="float: left; width: 20%;">hair</b><b>▌</b> past the shoulder, thick + curly <br>
 <b style="float: left; width: 20%;">coloring</b><b>▌</b> White as snow, or clouds<br>
 <b style="float: left; width: 20%;">eyes</b><b>▌</b> Green-blue<br>
 <b style="float: left; width: 20%;">secret</b><b>▌</b> <a target="_blank" href="http://i.picpar.com/yWZd.jpg" target="_blank">True Form</a><br>
 <b style="float: left; width: 20%;">diet</b><b>▌</b> Omnivore -- meaty lean<br>
 <b style="float: left; width: 20%;">job</b><b>▌</b> Protector<br>
 <b style="float: left; width: 20%;">home</b><b>▌</b> Unknown

</div></div>
<div class="friendz">
<div class="friends">
<h1>the trustworthy</h1>
  <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" ></a>
 <center><b>- Name -</b><br> <i>foe/friend</i><br> small note.</center><br><br><br><br>
  <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" ></a>
 <center><b>- Name -</b><br> <i>foe/friend</i><br> small note.</center><br><br><br><br>
 <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" ></a>
 <center><b>- Name -</b><br> <i>foe/friend</i><br> small note.</center><br><br><br><br>
 <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" ></a>
 <center><b>- Name -</b><br> <i>foe/friend</i><br> small note.</center><br><br><br><br>
 <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" ></a>
 <center><b>- Name -</b><br> <i>foe/friend</i><br> small note.</center><br><br><br><br>

</div></div>

</div>