ignis

<style type="text/css">
@import url(//fonts.googleapis.com/css?family=Bebas Neue);
@import url(//fonts.googleapis.com/css?family=Courgette);
@import url(//fonts.googleapis.com/css?family=Oswald);
@import url(//fonts.googleapis.com/css?family=bebas+neue);
@import url(//fonts.googleapis.com/css?family=Poppins);
@import url(//fonts.googleapis.com/css?family=Sedgwick+Ave);
@import url(//fonts.googleapis.com/css?family=Pathway+Gothic+One);


/*body*/
body{
 background-color: #1e1a1c;
background-image: url("http://i.picpar.com/kYzc.png");}

b, strong { font-family: bebas neue; font-size: 14px;line-height: 15px; font-weight: bold;
  color: #1e1a1c;
 text-shadow: 1px 0px 0px #4d4246,
 -1px 1px 0px #4d4246,
 0px 0px 0px #4d4246,
 0px -1px 0px #4d4246,
 0px 0px 1px #4d4246;}

i, em {color:#d3b18e; font-family: sedgwick ave; font-size:14px;}


body, a {cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur819.cur), auto;}

/*scroll*/
::-webkit-scrollbar {
 width: 5px;
 height: 0px;
 background:;
 }

 ::-webkit-scrollbar-thumb {
 background-color: #4d4246;
 -webkit-border-radius: 10px;
 border-radius: 10px;
z-index: 999;
 }



/*aesthetics*/
#round img{
position: fixed;
max-width: 95%;
height:auto;
top:-100px;
left: 15px;
z-index: 2;
}


/*navigation*/
#navi {
 position: fixed;
 left:76.2%;
 top:12%;
 width: 5px;
 height: 2000px;
 padding:5px;
 z-index: 6;
display: inline-block;
 float: left;
 }

 #navi a:link, #navi a:visited {
 text-decoration:none;
 font-weight:normal !important;
 padding:5px;
 margin-left: 10px;
 width: 1px;
margin: 0px 0px 10px 0px;
height: 31px;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
border: 2px #4d4246 solid;
background-color:#1e1a1c;

 float: left;
 }

 #navi a:hover {
 background-color:#4d4246;
 text-decoration:none;
 float: left;
 }

/*content*/
.box {
 position: fixed;
 width: 438px;
 height:300px;
 top: 13%;
 left: 43%;
 padding: 5px;
 font-size: 12px;
 line-height: 13px;
 text-align: center;
font-family: 'Oswald';
 color: #4d4246;
 overflow: auto;
 opacity: 0;
 transition: all 0.7s ease-in-out;
 -webkit-transition: all 0.7s ease-in-out;
 -moz-transition: all 0.7s ease-in-out;
 -o-transition: all 0.7s ease-in-out;
 -ms-transition: all 0.7s ease-in-out;
 z-index:2;
 }

 .box:target {
 top: 13%;
 left: 43%;
 overflow: auto;
 opacity: 1;
 transition: all 0.7s ease-in-out;
 -webkit-transition: all 0.7s ease-in-out;
 -moz-transition: all 0.7s ease-in-out;
 -o-transition: all 0.7s ease-in-out;
 -ms-transition: all 0.7s ease-in-out;
 z-index:8;
 }

/*tables*/
td.one{
 width: 261px;
 font-family: Bebas neue;
 font-size: 14px;
 text-align: left;
 word-spacing: 2px;
 letter-spacing: 0px;
 line-height: 9px;
 font-weight: bold;
 color: #1e1a1c;
 text-shadow: 1px 0px 0px #4d4246,
 -1px 1px 0px #4d4246,
 0px 0px 0px #4d4246,
 0px -1px 0px #4d4246,
 0px 0px 1px #4d4246;
}

 td.two{
 width: 261px;
 font-family: Oswald;
 font-size: 12px;
 text-align: right;
 word-spacing: 1px;
 letter-spacing: 0px;
 line-height: 9px;
 color: #4d4246;
 }

/*link*/
a:link,a:active,a:visited {
 color: #c15b19;
 font-family: Courgette;
 font-size: 14px;
 line-height: 10px;
 letter-spacing: 0px;
 display: ;
 font-weight: bold;
 margin-bottom: px;
 word-spacing: 0px;
 text-transform: none;
 text-align: center;
 text-decoration: none;
 transition: all .3s ease-in-out;
 -webkit-transition: all .3s ease-in-out;
 -moz-transition: all .3s ease-in-out;
 -o-transition: all .3s ease-in-out;
 -ms-transition: all .3s ease-in-out;
    text-shadow: 1px 0px 0px #dbc1a0,
    0px 1px 0px #dbc1a0,
    -1px 0px 0px #dbc1a0,
    0px -1px 0px #dbc1a0,
    0px 0px 20px #dbc1a0;

 z-index: 20;
 }

 a:hover {
 color: #b75023;
 font-family: courgette;
 font-size: 14px;
 line-height: 10px;
 letter-spacing: 0px;
 display: ;
 font-weight: bold;
 margin-bottom: px;
 word-spacing: 0px;
 text-align: center;
 text-decoration: none;
 transition: all .3s ease-in-out;
 -webkit-transition: all .3s ease-in-out;
 -moz-transition: all .3s ease-in-out;
 -o-transition: all .3s ease-in-out;
 -ms-transition: all .3s ease-in-out;

}


/*music*/
#music1{
 position:fixed;
left: 63%;
top: 65%;
 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;
z-index: 4;
}

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

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

#music1:hover #musiclist{
 opacity:1;
}

#music2{
 /* First gif image*/
 opacity:1;
 background-color:#transparent;
 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{
 /* Music player */
 opacity:0;
 position:fixed;
 background-color:#transparent;
 background-image:
 url('http://assets.clickmotive.com/Designs/LEMidnight/playButton.png');
 background-repeat: no-repeat;
 background-size: 25px;
 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="round"><img src="http://i.picpar.com/6RSc.png"></div>

<div id="navi">
 <a href="#ichi"></a>
 <a href="#ni"></a>
<a href="#san"></a>
<a href="#shi"></a>
<a href="#go"></a>
<a href="#roku"></a>
</div>

<div id="ichi" class="box">
<table>
 <tr><td class="one">
Left
 </td><td class="two">
 ---
 </td></tr><tr>

 <tr><td class="one">
 Left
 </td><td class="two">
 ---
 </td></tr><tr>

 <tr><td class="one">
Left
 </td><td class="two">
 ---
 </td></tr><tr>

 <tr><td class="one">
 Left
 </td><td class="two">
---
 </td></tr><tr>

 <tr><td class="one">
 Left
 </td><td class="two">
 ---
 </td></tr><tr>

 <tr><td class="one">
 Left
 </td><td class="two">
 ---
</td></tr><tr>


 <tr><td class="one">
 Left
 </td><td class="two">
 ---
 </td></tr><tr>

 <tr><td class="one">
Left
 </td><td class="two">
 ---
 </td></tr><tr>

<tr><td class="one">
Left
 </td><td class="two">
 ---
 </td></tr><tr>

<tr><td class="one">
Left
 </td><td class="two">
---
 </td></tr><tr>

<tr><td class="one">
Left
 </td><td class="two">
---
 </td></tr><tr>

<tr><td class="one">
Left
 </td><td class="two">
---
 </td></tr><tr>
</table>

 </div>

 <div id="ni" class="box">
2<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at velit quis purus maximus vestibulum. Nulla blandit, urna sed dignissim facilisis, erat mauris condimentum dui, ut ornare urna erat a ipsum. Vestibulum venenatis neque ultrices, placerat justo ut, elementum turpis. Vestibulum vitae est tempus, tempus mi non, viverra nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet varius neque, et ullamcorper urna. Nullam laoreet euismod ex at gravida. Mauris elementum eros non ipsum dapibus mattis. Fusce malesuada quis est a iaculis. Ut et tellus dictum, sollicitudin arcu vel, posuere diam.

Nam rhoncus augue sed libero venenatis pulvinar. Proin in erat id erat luctus rhoncus sed quis nulla. Suspendisse potenti. In ut erat non lectus semper maximus. Cras urna nisi, sagittis nec dapibus non, accumsan non sem. Nam felis quam, bibendum maximus nibh ac, aliquam suscipit lorem. Maecenas non imperdiet felis, at dignissim ante. Etiam purus metus, viverra sit amet egestas a, facilisis vitae quam. Nam varius, purus non sollicitudin elementum, arcu justo varius turpis, nec pellentesque sem justo sed nulla. Etiam sit amet tortor risus. Morbi eu facilisis purus, quis pretium lorem. Curabitur eu mollis orci, non elementum orci. Curabitur leo diam, commodo vel dolor vel, blandit tempus risus. Nam aliquet viverra metus id laoreet. Pellentesque eget nulla eget sapien condimentum lobortis. Proin gravida lacinia sapien, eget faucibus nulla commodo sed.

Quisque congue elit eget eros consectetur ullamcorper. Proin pulvinar gravida viverra. Nulla facilisi. Vivamus in est non risus cursus accumsan. Duis nec tellus ac est rhoncus fermentum. Nam hendrerit sagittis tortor. Fusce placerat bibendum blandit. Morbi congue lacus tincidunt lectus dignissim auctor. Maecenas eleifend orci sed urna vestibulum consectetur. Nam vel nisl ac elit porttitor pretium. Donec eleifend neque sapien. Vestibulum quis dictum arcu.

Ut pretium augue at tellus fermentum imperdiet. In dapibus accumsan tellus, id accumsan tortor sodales et. Morbi eu elit ac dui dignissim finibus eu ut eros. Suspendisse sed nunc hendrerit dolor eleifend dignissim. Phasellus pretium neque ex, eget pulvinar turpis congue id. Nullam sollicitudin consectetur enim, a consequat nunc pharetra non. Vivamus lobortis felis non orci efficitur, in imperdiet ipsum accumsan. Quisque pulvinar sodales pretium. Vivamus ut nulla hendrerit, fermentum turpis ac, egestas magna. Phasellus id elementum sem, commodo luctus nisl. Mauris vulputate faucibus lorem ut tempus. Donec placerat congue diam. Morbi sodales eros at urna dignissim, at facilisis ante convallis. Maecenas vitae consectetur felis, vitae sodales nisi.

Aenean sit amet nisi sed quam cursus efficitur. Nulla gravida leo quis lacus tincidunt mattis. Etiam tempor dignissim luctus. Ut in volutpat magna, nec convallis ipsum. Pellentesque nec interdum enim. Aliquam eget laoreet leo, viverra convallis elit. Aliquam fermentum accumsan velit, ac euismod lectus viverra vel. Integer dictum rhoncus dolor in gravida.
 </div>

<div id="san" class="box">
3<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at velit quis purus maximus vestibulum. Nulla blandit, urna sed dignissim facilisis, erat mauris condimentum dui, ut ornare urna erat a ipsum. Vestibulum venenatis neque ultrices, placerat justo ut, elementum turpis. Vestibulum vitae est tempus, tempus mi non, viverra nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet varius neque, et ullamcorper urna. Nullam laoreet euismod ex at gravida. Mauris elementum eros non ipsum dapibus mattis. Fusce malesuada quis est a iaculis. Ut et tellus dictum, sollicitudin arcu vel, posuere diam.

Nam rhoncus augue sed libero venenatis pulvinar. Proin in erat id erat luctus rhoncus sed quis nulla. Suspendisse potenti. In ut erat non lectus semper maximus. Cras urna nisi, sagittis nec dapibus non, accumsan non sem. Nam felis quam, bibendum maximus nibh ac, aliquam suscipit lorem. Maecenas non imperdiet felis, at dignissim ante. Etiam purus metus, viverra sit amet egestas a, facilisis vitae quam. Nam varius, purus non sollicitudin elementum, arcu justo varius turpis, nec pellentesque sem justo sed nulla. Etiam sit amet tortor risus. Morbi eu facilisis purus, quis pretium lorem. Curabitur eu mollis orci, non elementum orci. Curabitur leo diam, commodo vel dolor vel, blandit tempus risus. Nam aliquet viverra metus id laoreet. Pellentesque eget nulla eget sapien condimentum lobortis. Proin gravida lacinia sapien, eget faucibus nulla commodo sed.

Quisque congue elit eget eros consectetur ullamcorper. Proin pulvinar gravida viverra. Nulla facilisi. Vivamus in est non risus cursus accumsan. Duis nec tellus ac est rhoncus fermentum. Nam hendrerit sagittis tortor. Fusce placerat bibendum blandit. Morbi congue lacus tincidunt lectus dignissim auctor. Maecenas eleifend orci sed urna vestibulum consectetur. Nam vel nisl ac elit porttitor pretium. Donec eleifend neque sapien. Vestibulum quis dictum arcu.

Ut pretium augue at tellus fermentum imperdiet. In dapibus accumsan tellus, id accumsan tortor sodales et. Morbi eu elit ac dui dignissim finibus eu ut eros. Suspendisse sed nunc hendrerit dolor eleifend dignissim. Phasellus pretium neque ex, eget pulvinar turpis congue id. Nullam sollicitudin consectetur enim, a consequat nunc pharetra non. Vivamus lobortis felis non orci efficitur, in imperdiet ipsum accumsan. Quisque pulvinar sodales pretium. Vivamus ut nulla hendrerit, fermentum turpis ac, egestas magna. Phasellus id elementum sem, commodo luctus nisl. Mauris vulputate faucibus lorem ut tempus. Donec placerat congue diam. Morbi sodales eros at urna dignissim, at facilisis ante convallis. Maecenas vitae consectetur felis, vitae sodales nisi.

Aenean sit amet nisi sed quam cursus efficitur. Nulla gravida leo quis lacus tincidunt mattis. Etiam tempor dignissim luctus. Ut in volutpat magna, nec convallis ipsum. Pellentesque nec interdum enim. Aliquam eget laoreet leo, viverra convallis elit. Aliquam fermentum accumsan velit, ac euismod lectus viverra vel. Integer dictum rhoncus dolor in gravida.
 </div>

<div id="shi" class="box">
4<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at velit quis purus maximus vestibulum. Nulla blandit, urna sed dignissim facilisis, erat mauris condimentum dui, ut ornare urna erat a ipsum. Vestibulum venenatis neque ultrices, placerat justo ut, elementum turpis. Vestibulum vitae est tempus, tempus mi non, viverra nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet varius neque, et ullamcorper urna. Nullam laoreet euismod ex at gravida. Mauris elementum eros non ipsum dapibus mattis. Fusce malesuada quis est a iaculis. Ut et tellus dictum, sollicitudin arcu vel, posuere diam.

Nam rhoncus augue sed libero venenatis pulvinar. Proin in erat id erat luctus rhoncus sed quis nulla. Suspendisse potenti. In ut erat non lectus semper maximus. Cras urna nisi, sagittis nec dapibus non, accumsan non sem. Nam felis quam, bibendum maximus nibh ac, aliquam suscipit lorem. Maecenas non imperdiet felis, at dignissim ante. Etiam purus metus, viverra sit amet egestas a, facilisis vitae quam. Nam varius, purus non sollicitudin elementum, arcu justo varius turpis, nec pellentesque sem justo sed nulla. Etiam sit amet tortor risus. Morbi eu facilisis purus, quis pretium lorem. Curabitur eu mollis orci, non elementum orci. Curabitur leo diam, commodo vel dolor vel, blandit tempus risus. Nam aliquet viverra metus id laoreet. Pellentesque eget nulla eget sapien condimentum lobortis. Proin gravida lacinia sapien, eget faucibus nulla commodo sed.

Quisque congue elit eget eros consectetur ullamcorper. Proin pulvinar gravida viverra. Nulla facilisi. Vivamus in est non risus cursus accumsan. Duis nec tellus ac est rhoncus fermentum. Nam hendrerit sagittis tortor. Fusce placerat bibendum blandit. Morbi congue lacus tincidunt lectus dignissim auctor. Maecenas eleifend orci sed urna vestibulum consectetur. Nam vel nisl ac elit porttitor pretium. Donec eleifend neque sapien. Vestibulum quis dictum arcu.

Ut pretium augue at tellus fermentum imperdiet. In dapibus accumsan tellus, id accumsan tortor sodales et. Morbi eu elit ac dui dignissim finibus eu ut eros. Suspendisse sed nunc hendrerit dolor eleifend dignissim. Phasellus pretium neque ex, eget pulvinar turpis congue id. Nullam sollicitudin consectetur enim, a consequat nunc pharetra non. Vivamus lobortis felis non orci efficitur, in imperdiet ipsum accumsan. Quisque pulvinar sodales pretium. Vivamus ut nulla hendrerit, fermentum turpis ac, egestas magna. Phasellus id elementum sem, commodo luctus nisl. Mauris vulputate faucibus lorem ut tempus. Donec placerat congue diam. Morbi sodales eros at urna dignissim, at facilisis ante convallis. Maecenas vitae consectetur felis, vitae sodales nisi.

Aenean sit amet nisi sed quam cursus efficitur. Nulla gravida leo quis lacus tincidunt mattis. Etiam tempor dignissim luctus. Ut in volutpat magna, nec convallis ipsum. Pellentesque nec interdum enim. Aliquam eget laoreet leo, viverra convallis elit. Aliquam fermentum accumsan velit, ac euismod lectus viverra vel. Integer dictum rhoncus dolor in gravida.
 </div>

<div id="go" class="box">
reg<b>bold</b><i>italics</i><a href="">link</a><br>
5<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at velit quis purus maximus vestibulum. Nulla blandit, urna sed dignissim facilisis, erat mauris condimentum dui, ut ornare urna erat a ipsum. Vestibulum venenatis neque ultrices, placerat justo ut, elementum turpis. Vestibulum vitae est tempus, tempus mi non, viverra nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet varius neque, et ullamcorper urna. Nullam laoreet euismod ex at gravida. Mauris elementum eros non ipsum dapibus mattis. Fusce malesuada quis est a iaculis. Ut et tellus dictum, sollicitudin arcu vel, posuere diam.

Nam rhoncus augue sed libero venenatis pulvinar. Proin in erat id erat luctus rhoncus sed quis nulla. Suspendisse potenti. In ut erat non lectus semper maximus. Cras urna nisi, sagittis nec dapibus non, accumsan non sem. Nam felis quam, bibendum maximus nibh ac, aliquam suscipit lorem. Maecenas non imperdiet felis, at dignissim ante. Etiam purus metus, viverra sit amet egestas a, facilisis vitae quam. Nam varius, purus non sollicitudin elementum, arcu justo varius turpis, nec pellentesque sem justo sed nulla. Etiam sit amet tortor risus. Morbi eu facilisis purus, quis pretium lorem. Curabitur eu mollis orci, non elementum orci. Curabitur leo diam, commodo vel dolor vel, blandit tempus risus. Nam aliquet viverra metus id laoreet. Pellentesque eget nulla eget sapien condimentum lobortis. Proin gravida lacinia sapien, eget faucibus nulla commodo sed.

Quisque congue elit eget eros consectetur ullamcorper. Proin pulvinar gravida viverra. Nulla facilisi. Vivamus in est non risus cursus accumsan. Duis nec tellus ac est rhoncus fermentum. Nam hendrerit sagittis tortor. Fusce placerat bibendum blandit. Morbi congue lacus tincidunt lectus dignissim auctor. Maecenas eleifend orci sed urna vestibulum consectetur. Nam vel nisl ac elit porttitor pretium. Donec eleifend neque sapien. Vestibulum quis dictum arcu.

Ut pretium augue at tellus fermentum imperdiet. In dapibus accumsan tellus, id accumsan tortor sodales et. Morbi eu elit ac dui dignissim finibus eu ut eros. Suspendisse sed nunc hendrerit dolor eleifend dignissim. Phasellus pretium neque ex, eget pulvinar turpis congue id. Nullam sollicitudin consectetur enim, a consequat nunc pharetra non. Vivamus lobortis felis non orci efficitur, in imperdiet ipsum accumsan. Quisque pulvinar sodales pretium. Vivamus ut nulla hendrerit, fermentum turpis ac, egestas magna. Phasellus id elementum sem, commodo luctus nisl. Mauris vulputate faucibus lorem ut tempus. Donec placerat congue diam. Morbi sodales eros at urna dignissim, at facilisis ante convallis. Maecenas vitae consectetur felis, vitae sodales nisi.

Aenean sit amet nisi sed quam cursus efficitur. Nulla gravida leo quis lacus tincidunt mattis. Etiam tempor dignissim luctus. Ut in volutpat magna, nec convallis ipsum. Pellentesque nec interdum enim. Aliquam eget laoreet leo, viverra convallis elit. Aliquam fermentum accumsan velit, ac euismod lectus viverra vel. Integer dictum rhoncus dolor in gravida.
 </div>


<div id="music1">
<div id="music2">


<img src="http://68.media.tumblr.com/tumblr_m7vxuuzOHZ1r6o8v2.gif" style="opacity: 1;"></div>

<div id="music3">
<Div style="margin-top:4px;">

<audio controls style="opacity: 0;"><source src="https://my.mixtape.moe/wvafkn.mp3"></audio>
</div>

</div>