Akatsuki no Yona

<style type="text/css">

 @import url(https://fonts.googleapis.com/css?family=Mr+Dafoe);
 @import url(https://fonts.googleapis.com/css?family=Unica+One);
 @import url(https://fonts.googleapis.com/css?family=Rajdhani:600);

body {

background-color: ##DED5CE;
background-image: url(http://i.picpar.com/w99.png);
background-attachment: fixed;
background-position: center center;
background-repeat: repeat;
background-size: auto;
font-family: Times New Roman;
font-variant: normal;
font-size: 70%;
color: #666666;}

::-webkit-scrollbar-track {background-color:#8FACD8;}
::-webkit-scrollbar-thumb {background-color:#fff; border:3px solid #fff;}
::-webkit-scrollbar {width:11px;height:5px;}

a {color: #8C0E30; text-decoration: none; }

a:hover {color: black; text-decoration: none;
cursor: url('http://media.tumblr.com/e7f72e808c4dbe5006b9c3a30dbc9b79/tumblr_inline_mh67vhwGnR1rdqsqf.png');}
*{cursor: url('http://media.tumblr.com/7c3edb626c8cf9435c5c0b2d6acceffd/tumblr_inline_mh67v6xNXM1rdqsqf.png'), default;}

#box { position: fixed; top: 25%; left: 5%; height: 400px; width: 300px; background-color: #DFDFDF; overflow: auto;  z-index: 1; }

#line { position: fixed; top: 33%; left: 10%; height: 2px; width: 220px; background-color: #8C0E30; overflow: auto; z-index: 2; }

#yona {position: fixed; top: 26%; left: 5.5%; width: 100px; height: 100px; background-image: url("GIF 1");  background-position: right; background-size: 100% 100%; border: solid 2px #8C0E30; border-radius:50%; z-index: 3; -webkit-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out; }

#yona:hover{ height: 100px; width: 100px; background-image:url(GIF 2); background-position: ; background-repeat:no-repeat; background-size: 100% 100%; filter: alpha(opacity=3); opacity: 3; overflow:auto; transform:rotate(3720deg); -moz-transform:rotate(3720deg); /* Firefox 4 */ -webkit-transform:rotate(720deg); /* Safari and Chrome */ -o-transform:rotate(720deg); /* Opera */ -webkit-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out; border-radius:50%; }

.Name { position: fixed; top: 27%; left: 13.5%; color: #8C0E30; font-size: 30px; line-height: 50px; font-family: 'Mr Dafoe', cursive; z-index: 900; }

.abox {background-color:#DFDFDF; color: #000; font-size: 13px; font-family: 'Rajdhani', sans-serif; text-align: justify; position: absolute; width: 276; height: 264; left: 75; top: 290; letter-spacing:0px; line-height: 11px; padding: 3px; margin: 1px; overflow:auto; border: 1px solid black; z-index: 100;}

.navbar {Background-color: transparent; Position: absolute; Height: 13px; Width: 242px; Left: 12.5%; Top: 33%; padding: 4px; z-index: 100; font-family: 'Unica One', cursive; font-weight: bold;}

.link1 {Position: absolute; Left: 13px; }

.link2 {Position: absolute; Left: 43px; }

.link3 {Position: absolute; Left: 75px; }

.link4 {Position: absolute; Left: 115px; }

.link5 {Position: absolute; Left: 150px; }

.slide {Position: fixed; Height: 555555; Width: 555555; Top: -200px; Left: 0; Z-index: -1; Opacity: 0; transition: 0.8s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}

.slide:target {Top: 0; Opacity: 1; Z-index: 1; transition: 0.8s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}

h1 { Color: #000; Border-bottom: 1.5px solid #4F335E; Border-left: 40px solid #8C0E30; font-size:16px; text-align: center; Text-Shadow: #878487 2px 1px 1px; Font-family: 'Rajdhani', sans-serif; Margin-Top: 1px;}

.hak { position: fixed; background-color: #DFDFDF; border:1px #000 solid; overflow: auto; width: 272; height: 260; top: 42.9%; left: 5.6%; padding: 5px; text-align: justify; font-size: 11px;  font-family: 'Rajdhani', sans-serif; color: #000; line-height: 14px; z-index: 1;}

#princess-yona { position:fixed; right: 10%; bottom: 0%; height: 650px; width: 450px;}

</style>

<div id="princess-yona">
<img src="RENDER" height="100%" width="100%">
</div>

<div id="box"></div>
<div id="yona"></div>
<div id="line"></div>

<div class="Name">CHARA NAME</div>

<div class="hak">

<h1>Table Header</h1>

</div>

<div class="navbar">
<a class="link1" href="#1"><font size="2">One</a></font>
<a class="link2" href="#2"><font size="2">Two</a></font>
<a class="link3" href="#3"><font size="2">Three</a></font>
<a class="link4" href="#4"><font size="2">Four</a></font>
<a class="link5" href="#5"><font size="2">Reset</a></font>
</div></div>

<div id="1" class="slide">
<div class="abox">



</div></div>

<div id="2" class="slide">
<div class="abox">



</div></div>

<div id="3" class="slide">
<div class="abox">



</div></div>

<div id="4" class="slide">
<div class="abox">



</div></div>