WUKONG CODE [DONE]

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Anton|Satisfy|Fascinate|Cormorant+Unicase|Alice|Akaya+Kanadaka');

body {
background-color: #;
background-image: linear-gradient(to top , #ffbb54, #ff3535);
background-position: center;
background-size: 100%;
background-repeat:repeat;
}

#kong {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}

::-webkit-scrollbar-track {
background-color:;
}

::-webkit-scrollbar-thumb {
background-color:;
}

::-webkit-scrollbar {
width:0px;
height:0px;
}

#container {
position: absolute;
left: 16%;
top: 32%;
border: 3px solid #ff3535;
height: 250px;
width: 400px;
background-image: url('https://media0.giphy.com/media/bSVs7S0Kk1DfLU8IWy/giphy.gif');
background-size: 150%;
background-repeat: no-repeat;
background-position: center;
box-shadow: 0px 0px 5px 5px #911a1a;
}

#container:hover {
background-image: url('https://i.ibb.co/0mBvbQr/Kris-Wu-red.jpg');
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}

#box1 {
position: absolute;
z-index: 1;
right: -230px;
top: -23px;
height: 285px;
padding: 5px;
width: 180px;
border: 3px solid #ff3535;
box-shadow: 0px 0px 5px 5px #911a1a;
background-color: #cf3232;
overflow-y: auto;
line-height: 16px;
font-size: 11px;
font-family: 'Alice';
color: #000;
}

#box2 {
position: absolute;
z-index: 1;
right: -458px;
top: -23px;
height: 285px;
padding: 5px;
width: 180px;
border: 3px solid #ff3535;
box-shadow: 0px 0px 5px 5px #911a1a;
background-color: #cf3232;
overflow-y: auto;
line-height: 16px;
font-size: 11px;
font-family: 'Alice';
color: #000;
}

#bar1 {
position: absolute;
left: -10px;
top: -45px;
background: #ff3535;
box-shadow: 0px 0px 5px 5px #911a1a;
height: 13px;
width: 410px;
transform: skew(15deg);
}

#bar2 {
position: absolute;
left: -10px;
bottom: -45px;
background: #ff3535;
box-shadow: 0px 0px 5px 5px #911a1a;
height: 13px;
width: 410px;
transform: skew(-15deg);
}

#aes1 {
position: absolute;
z-index: 1;
left: 434px;
top: -148px;
width: 150px;
height: 90px;
border: 3px solid #ff3535;
box-shadow: 0px 0px 5px 5px #911a1a;
background-image: url('https://media4.giphy.com/media/LVd143qg1oARFavZeb/giphy.gif');
background-size: 140%;
background-repeat: no-repeat;
background-position: right;
}

#aes2 {
background-image: url('https://media3.giphy.com/media/5aOlESUaCgDi63rUEQ/giphy.gif');
background-size: 140%;
background-repeat: no-repeat;
background-position: right;
position: absolute;
z-index: 1;
left: 620px;
top: -148px;
width: 233px;
height: 90px;
border: 3px solid #ff3535;
box-shadow: 0px 0px 5px 5px #911a1a;
}

#tab1 {
position: absolute;
z-index: 1;
left: 434px;
bottom: -70px;
height: 12px;
width: 70px;
background: #ff3535;
box-shadow: 0px 0px 5px 5px #911a1a;
}

#tab2 {
position: absolute;
z-index: 1;
left: 530px;
bottom: -70px;
height: 12px;
width: 70px;
background: #ff3535;
box-shadow: 0px 0px 5px 5px #911a1a;
}

#reset {
position: absolute;
z-index: 1;
left: 625px;
bottom: -83px;
height: 40px;
border-radius: 50%;
width: 40px;
background: #000;
box-shadow: 0px 0px 5px 5px #911a1a;
}

#tab3 {
position: absolute;
z-index: 1;
left: 690px;
bottom: -70px;
height: 12px;
width: 70px;
background: #ff3535;
box-shadow: 0px 0px 5px 5px #911a1a;
}

#tab4 {
position: absolute;
z-index: 1;
left: 786px;
bottom: -70px;
height: 12px;
width: 70px;
background: #ff3535;
box-shadow: 0px 0px 5px 5px #911a1a;
}

b {
font-family: 'Akaya Kanadaka';
color: orange;
font-size: 10px;
letter-spacing: 1px;
}

i {
font-family: 'Cormorant Unicase';
color: #ffc7c2;
}

a {
font-family: 'Satisfy';
color: #eee;
letter-spacing: 1px;
text-decoration: none;
}

a:hover {
opacity: 0.8;
text-decoration: underline;
-webkit-transition:opacity 0.7s linear;
 -webkit-transition:all 0.6s ease-out;
 -moz-transition:all 0.6s ease-out;
 transition:all 0.6s ease-out;
}

h1 {
font-family: 'Fascinate';
font-size: 20px;
color: #9c1a11;
text-align: right;
border-left: 50px solid #9c1a11;
text-shadow: 0px 0px 3px #fff;
margin-top: 0px;
margin-bottom: 4px;
}

</style>
<div id="kong" oncontextmenu="return false;">
<div id="container">
<div id="box1">
<h1>Typist</h1>
<li>Coded by <a href="" target="_blank">Chuu</a> for <a href="" target="_blank">Sun Wukong</a>. Do not touch any part of this code! If you would like something similar, you're welcome to ask.</li>
<li>DM friendly, if you have questions just shoot them my way. The character is a dicky man with a frat boy mentality but the typist is not, please feel free to approach me.</li>
<li>Character is Sun Wukong, the Monkey King. A figure from Chinese mythology, most well-known as the protagonist of <i>Journey to the West</i>. I play him as I see fit.</li>
<li>FC is Wu Yifan, also known as Kris Wu. I am not playing that person, I am just borrowing his likeness. All respect to the artist himself, check out his work.</li>
<li>Character is hypersexed. If you're interested in having had a one-night-stand with him, lemme know. I'm not inherently against that connection. But he's not looking for love and typically won't sleep with the same partner twice, a warning he gives IC and I'm giving OOC.</li>
<li>That being said, I adore all types of character ties, not just the sexy sort. Let it be known he doesn't have a great deal of respect for Chinese deities and immortals, so his politeness is likely sarcastic.</li></div>
<div id="bar1"></div>
<div id="bar2"></div>
<div id="aes1"></div>
<div id="aes2"></div>
<a href="#2"><div id="tab1"></div></a>
<a href="#3"><div id="tab2"></div></a>
<a href="#4"><div id="tab3"></div></a>
<a href="#5"><div id="tab4"></div></a>
<a href="#1"><div id="reset"></div></a>
<div id="box2">
<div style="height: 285px; overflow-y: hidden;">
<a name="1"></a>
<div style="height: 285px; overflow: auto;">
<div style="margin: 0 auto; width: 16.4em;">
<h1>Statistics</h1>
<B>Name:</B> <font style=float:right>Sun Wukong.</font><br>
<B>Alias:</B> <font style=float:right>Kong, Daddy Kong.</font><br>
<font style=float:right>King Kong, Wu.</font><br>
<B>Epithet:</B> <font style=float:right><i>Monkey King.</i></font><br>
<B>Age:</B> <font style=float:right>Immortal.</font><br>
<B>Appears:</B> <font style=float:right>Late Twenties.</font><br>
<B>Orient:</B> <font style=float:right>Pan.</font><br>
<B>Marital:</B> <font style=float:right>Single.</font><br>
<B>Job:</B> <font style=float:right>Councilman.</font><br>
<font style=float:right>Dojo Sifu.</font><br>

</div></div>

<a name="2"></a>
<div style="height: 285px; overflow: auto;">
<div style="margin: 0 auto; width: 16.4em;">
<h1>Headcanon</h1>
</div></div>

<a name="3"></a>
<div style="height: 285px; overflow: auto;">
<div style="margin: 0 auto; width: 16.4em;">
<h1>Abilities</h1>
</div></div>

<a name="4"></a>
<div style="height: 285px; overflow: auto;">
<div style="margin: 0 auto; width: 16.4em;">
<h1>Persona</h1>
</div></div>

<a name="5"></a>
<div style="height: 285px; overflow: auto;">
<div style="margin: 0 auto; width: 16.4em;">
<h1>Known</h1>
</div></div></div></div>
</div>
</div>