When Star Breaks Things Episode 4

<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://media.tenor.com/images/2d04da00ecf31f6065b436094f0b9c95/tenor.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://media.tenor.com/images/2d04da00ecf31f6065b436094f0b9c95/tenor.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: 28vh;
border: solid #000 2px;
background-color: #cec9c3;
background-image: url('https://media.tenor.com/images/2d04da00ecf31f6065b436094f0b9c95/tenor.gif');
background-size: fill;
background-position: center;
background-repeat: no-repeat;
z-index: 2;
}

#pic {
position: fixed;
top: -2vw;
right: 15vw;
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://media.tenor.com/images/2d04da00ecf31f6065b436094f0b9c95/tenor.gif') repeat;
background-position: center;
position: absolute;
font-family: 'big';
font-size: 3.5vw;
left: 720px; bottom:10vw;
width: 35vw;
height: 15vw;
text-align: justify;
padding:5px 5px 5px 5px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
z-index: 3;}

#shelf {
  display: inline-block;
background-color:#000;
width: 22vw;
height: 3vw;
margin:auto;
position: absolute;
padding: 2px;
font-family: 'Kiona', cursive;
font-size: 15px;
color: #fff;
left: 48vw;
top: 3vw;
z-index:1;
overflow: hidden;
border: #000000 solid 2px;
box-shadow: #000 0px 5px 10px;
background-image: url('https://media.tenor.com/images/2d04da00ecf31f6065b436094f0b9c95/tenor.gif');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
  transition: 0.4s linear;
  -o-transition: 0.4s linear;
  -ms-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -webkit-transition: 0.4s linear;
}

#shelf:hover {
  display: inline-block;
  height: 20vw;
  z-index: 2;
    transition: 0.4s linear;
  -o-transition: 0.4s linear;
  -ms-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -webkit-transition: 0.4s linear;
}

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

/*Code by Alikade, please keep this credit where it is, it will not interfere with the rest of the code.*/

#editthis{ position:fixed;height: 27px; width: 30px; bottom: 0vw; right: 0vw; margin: auto; z-index:99;}

#music1{ position:fixed; 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;}

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

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

#music1:hover #musiclist{ opacity: .5;}

#music2{ opacity: .5; background-color:#000000; 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{ opacity: 0; position:fixed; background-color:#000000; background-image: url('https://enspira.com.au/wp-content/uploads/Play-Button-Transparent-PNG-300x300.png'); background-repeat: no-repeat; background-size: 25px; border:1px dotted #b3b3e5; 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;}
</style>
<div id="editthis"><div id="music1"><div id="music2">
<img src="https://66.media.tumblr.com/ddaf2c15e09359581c6b6ec8bf13bb6e/1cec31ea271359b0-03/s75x75_c1/6193a616e986ab98b73421f3cc6577dfb283097c.gif" style="opacity: 0.8;"></div>
<div id="music3"><Div style="margin-top:4px;">
<audio controls style="opacity: 0;"><source src="KIWI6LINKHERE"></audio>
</div></div></div></div>

<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> Maebh Jewelle<br>
 <b style="float: left; width: 20%;">alias</b><b>▌</b> Mae, Ma, Jewel, Halfing<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">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 id="shelf">
<div style="width: 22vw; height: 20vw; overflow: auto;" align="left">
<div class="powers">
<h1>Magick</h1>

</div>
</div>
</div>
</div>