hello

<style type="text/css">
@font-face { font-family: 'BlackOut';
src:url('https://fonts.googleapis.com/css?family=Quicksand');}

@import url('https://fonts.googleapis.com/css?family=Josefin+Slab');


::-webkit-scrollbar-thumb:vertical { height:100%
 width:1px;
 background-color:#404040;
overflow-x:hidden; }

::-webkit-scrollbar {width:5px;
height:100%;
background-color:#999;
overflow-y:scroll; }


img
{bottom: 0;
top:0;
right:300;
left:0px;
position: fixed;
margin: auto;
border:8px #E8DEDD solid;}


body
{
background-color:#404040;}


body:hover #machine { transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
opacity: 0;
 z-index:-99; }

#han{background-color:#E8DEDD;
position:fixed;
height:342px;
width:360px;
top:160px;
right:200px;
margin:auto;}

#headline{background-color:transparent;
position:fixed;
margin:auto;
 height:30px;
width:350px;
top:350px;
left:910px;
font-family: 'Quicksand', sans-serif;
 font-size:40px;
color:#404040;
-webkit-transform: rotate(90deg);
transform: rotate(90deg); }

#first {background-color:transparent;
color:#404040;
font-family: 'Calibri', serif;
width:100%;
padding:0px;
height:420px;
text-align:justify;
font-size:9pt; }


h1{background-color:transparent;
color:#999;
font-family: 'Quicksand', sans-serif;
font-size:20px;
text-align:center;
border-bottom:#404040 solid 5px;
 width:100%;
height:15px;
line-height:30px;}


a
{text-decoration:none;
color:#ccc;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
opacity:1;}

a:hover
{text-decoration:none;
color:#999;
opacity:1;}


#machine {
position:fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff url('http://i.picpar.com/6ZHc.jpg') no-repeat;
height: 100%;
 width: 100%;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
transition-delay-opacity: 1.5s;
opacity: 1; }

#gun
{ position:fixed;
 top:50%;
left:10%;
color:#E8DEDD;
font-size:20px;
font-family: 'Quicksand', sans-serif;
width:100%;
height:100%;}

#page {
width:350px;
text-align: justify;
height:280px;
overflow: hidden;
background: transparent;
font-size:8pt;
}

.page{
width:100%;
height:280px;
text-align: justify;
overflow: auto;
background:transparent;
padding:5px; }

#navi {
 position:absolute;
 top:40px;
 left:10px;
 z-index:0;
width:350;
}

#navi a {
 float:left;
margin-left:1px;
 width: 66px;
 height: 10px;
 background: #999;
transition:all 1s ease-out;
 margin-bottom: 5px;
}

#navi a:hover {
background-color:#E8DEDD;
}

i {font-family:Bell MT;
color:#999;
font-style:italic;
}


.musicplayer{
position: fixed;
bottom: 0px;
left: 0px;
height: 30px;
width: 30px;
line-height: 30px;
font-size: 20px;
color: #541818;
text-align: center;
padding-left: 5px;
margin-left: -5px;
border-radius: 360px;
overflow: hidden;
}

.musicplayer:active {
color: #404040;
}
.moosic{
float: left;
margin-top: -30px;
margin-left: -2px;
height: 30px;
width: 30px;
overflow: hidden;
opacity: 0;
}

#second
{background:#404040;
height:40px;
width:300px;
position:relative;
top:10;
left:0;
font-size:6pt;
font-family:Calibri;
color:#fff;
}

</style>
<img src="https://i.imgur.com/AHVplNT.png" style="max-width:25%"></img>
<div id="headline">ONE BAD APPLE </div>
<div id="han">
<h1> <div id="navi"><a href="#1" title="history." id="links"></a>
<a href="#2" title="basics." id="links"></a>
<a href="#3" title="abilities." id="links"></a>
<a href="#4" title="ooc." id="links"></a>
<a href="#5" title="relationships." id="links"></a></div>
</h1>
<div id="first"><div id="page"><a name="1"></a>
<div class="page">

</div>
<div id="page"><a name="2"></a>
<div class="page">
<center>

<div id="second">

</div>
</div>

</div>

<div id="page"><a name="3"></a>
<div class="page">

</div>


<div id="page"><a name="4"></a>
<div class="page">

</div>
<div id="page"><a name="5"></a>
<div class="page">

</div>
</div>

<div id=machine>
<div id=gun>

</div></div>

</style>


<div class="musicplayer" title="eyes, nose, lips.">
►
<div class="moosic">
<audio controls>
<source src="https://my.mixtape.moe/yzpfdt.mp3">
</audio>
</div>
</div>