Monokuma

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
::-webkit-scrollbar-thumb:vertical {background: #880000; height: 50px; Width: 10px;}

::-webkit-scrollbar-thumb:horizontal {background-color: #000000; width: 5px; height: 90%; !important;}


::-webkit-scrollbar {height: 1px; width: 1%; background-color: transparent;}



body {background-image: url(https://yt3.ggpht.com/-FJ4NvQCG3B8/AAAAAAAAAAI/AAAAAAAAAAA/5MQqzWBUZv4/s900-c-k-no-mo-rj-c0xffffff/photo.jpg); Background-size: 100% 100%;; background-color: #fff; cursor: default; Overflow: hidden; cursor: url(http://31.media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png), progress !important;}

.container{
position: fixed;
margin: auto;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
width: 379px;
height: 202px;
background: url(https://68.media.tumblr.com/7915e4a3b2a3c607b574f36e33871dac/tumblr_npp8v4qJ5C1tjalyko1_1280.gif);
Background-size: 100%;
border: 5px solid #5d841e;
 border-image: url(https://www.clipartsgram.com/image/740744096-cute-black-and-white-backgrounds-tumblr-wallpapers-for-black-space-background-tumblr-pict.jpg) 30 round;
box-shadow: #000000 0px 0px 10px;
}

.bear {
Position: absolute;
Right: -300px;
Bottom: -32px;
height: 300px;
Width: 250px;
background: url(https://68.media.tumblr.com/453b6ad852375f71ee77b1fb0c31854b/tumblr_ocft0qJucD1vepp7yo1_250.gif);
Background-size: 100% 100%;
}

.top {
Position: absolute;
Top: -230px;
Left: 0;
width: 379px;
height: 202px;
background: url(https://68.media.tumblr.com/7915e4a3b2a3c607b574f36e33871dac/tumblr_npp8v4qJ5C1tjalyko1_1280.gif);
Background-size: 100%;
border: 5px solid #5d841e;
 border-image: url(https://www.clipartsgram.com/image/740744096-cute-black-and-white-backgrounds-tumblr-wallpapers-for-black-space-background-tumblr-pict.jpg) 30 round;
box-shadow: #000000 0px 0px 10px;
}

.bot {
Position: absolute;
bottom: -230px;
Left: 0;
width: 379px;
height: 202px;
background: url(https://68.media.tumblr.com/7915e4a3b2a3c607b574f36e33871dac/tumblr_npp8v4qJ5C1tjalyko1_1280.gif);
Background-size: 100%;
border: 5px solid #5d841e;
 border-image: url(https://www.clipartsgram.com/image/740744096-cute-black-and-white-backgrounds-tumblr-wallpapers-for-black-space-background-tumblr-pict.jpg) 30 round;
box-shadow: #000000 0px 0px 10px;
}

.side {
Position: absolute;
Top: -120px;
Left: -308;
width: 279px;
height: 402px;
background: url(https://68.media.tumblr.com/7915e4a3b2a3c607b574f36e33871dac/tumblr_npp8v4qJ5C1tjalyko1_1280.gif);
Background-size: 100%;
border: 5px solid #5d841e;
 border-image: url(https://www.clipartsgram.com/image/740744096-cute-black-and-white-backgrounds-tumblr-wallpapers-for-black-space-background-tumblr-pict.jpg) 30 round;
box-shadow: #000000 0px 0px 10px;
}

.in {
Position: absolute;
left: 0%;
top: 0%;
Height: 98%;
Width: 98%;
Padding: 2px;
background-color: rgba(0, 0, 0, 1);
Color:#fff;
Overflow: auto;
Font-size: 11px;
}

.in2 {
Position: absolute;
left: 0%;
top: 0%;
Height: 99%;
Width: 98.5%;
Padding: 2px;
background-color: #fff;
Color:#000;
Overflow: auto;
Font-size: 11px;
}

.in3 {
Position: absolute;
left: 0%;
top: 0%;
Height: 98%;
Width: 98%;
Padding: 2px;
background-color: rgba(0, 0, 0, 0.6);
Opacity: 0;
Color:#fff;
Overflow: auto;
Font-size: 11px;
transition: 0.8s;
}

.container:hover .in3 {
Opacity: 1;
transition: 0.8s; }

.ooc {
Position: absolute;
top: 0;
Left: 0;
Height: 100px;
Width: 100%;
background-color: rgba(0, 0, 0, 0.6);
overflow: auto;
}

h1 {
Color: white;
Border-right: 50px solid #880000;
Border-bottom: 2px solid #880000;
font-family: 'Press Start 2P', cursive;
font-size: 20px;
}

h2 {
Color: #880000;
Border-left: 50px solid #000;
Padding-left: 8px;
Border-bottom: 2px solid #000;
font-family: 'Press Start 2P', cursive;
font-size: 20px;
}

.bar {
Position: absolute;
Bottom: 10px;
Width: 100%;
Height: 40px;
Background: #000;
Right: 0;
Box-shadow: 1px 1px 6px;
}

.mono {
Position: Absolute;
Top: 105px;
Left: 10px;
Font-size: 45px;
Color: #fff;
font-family: 'Press Start 2P', cursive;
}

.c1, .c2, .c3 {
z-index: 2;
position: absolute;
left: 10px;
top: 10px;
width: 95px;
height: 25px;
background: url(http://i44.tinypic.com/2v8n9sh.jpg);
Background-size: 100% 100%;
transition: 0.8s;
 z-index:10; }
.c2 {
margin: 0px 0 0 125px;
 }

.c3 {
margin: 0px 0 0 250px;
 }

.c1:hover, .c2:hover, .c3:hover {
 background-color: #fff;
 }

ul {
list-style-image: url("http://i.imgur.com/XyTkiwG.png")
}

.slide {
Opacity: 0;
transition: 0.8s;
}

.slide:target {
Opacity: 1;
transition: 0.8s;
}

</style>

<div class="Container"><div class="in3">
<div class="Mono">Mono<font style="color:black;">kuma</font></div>
<div class="ooc">
<ul>
    <li><span style="top:-5px; position:relative;">The eyes below are the tabs.</span></li>
    <li><span style="top:-5px; position:relative;">This code was a gift and stealing it would be super rude.</span></li>
  <li><span style="top:-5px; position:relative;">rule.</span></li>
  <li><span style="top:-5px; position:relative;">rule.</span></li>
  <li><span style="top:-5px; position:relative;">rule.</span></li>
  <li><span style="top:-5px; position:relative;">rule.</span></li>
  <li><span style="top:-5px; position:relative;">rule.</span></li>
  <li><span style="top:-5px; position:relative;">rule.</span></li>
  <li><span style="top:-5px; position:relative;">rule.</span></li>
</ul>
</div>
<div class="bar">
 <div id="nav1"><a href="#1"><div class="c1"></div></a></div>
 <div id="nav2"><a href="#2"><div class="c2"></div></a></div>
 <div id="nav3"><a href="#3"><div class="c3"></div></a></div>
 <div id="nav4"><a href="#4"><div class="c4"></div></a></div>
</div>
</div>
<div id="1" class="slide">
<div class="bot">
<div class="in"><h1>Bottom 1</h1>Testing, testing, testing.</div></div>
<div class="top"><div class="in">
<h1>Top 1</h1>
testing, testing,  testing.</div></div>
<div class="side"><div class="in2">
<h2>Side 1</h1>


Testing,  testing, testing</div></div>
<div class="bear"></div>
</div>


<div id="2" class="slide">
<div class="bot">
<div class="in"><h1>Bottom 2</h1>Testing, testing, testing.</div></div>
<div class="top"><div class="in">
<h1>Top 2</h1>
testing, testing,  testing.</div></div>
<div class="side"><div class="in2">
<h2>Side 2</h1>


Testing,  testing, testing</div></div>
<div class="bear"></div>
</div>
</div>