Rhai

<style>

@import url(//fonts.googleapis.com/css?family=Shadows+Into+Light);
@import url(//fonts.googleapis.com/css?family=Architects+Daughter);
@import url(//fonts.googleapis.com/css?family=Kaushan+Script);
.pfor {
 display: none;
}

#profile {
 background-color: transparent;
 border: 0px;
}
/* Character Color: #4A8246 DARK
#93CC72 LIGHT
87A37A NORMAL */


body {background: black; overflow: hidden;
cursor: url(http://www.rw-designer.com/cursor-extern.php?id=5161), auto;
}

a, a:active, a:hover{ cursor: url(http://www.rw-designer.com/cursor-extern.php?id=5161), auto;}



#whole {
 background-image: url(http://i57.tinypic.com/2hclzep.jpg);
 background-repeat: no-repeat;
 background-position: bottom right;
 background-size: auto 90%;
 background-color: #161c13;
 position: fixed;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 font-family: 'Shadows Into Light', cursive;
 font-family: 'Architects Daughter', cursive;
 font-family: 'Kaushan Script', cursive;
}

#titlediv1 {
 position: absolute;
 left: 260px;
 top: 175px;
 font-size: 20pt;
 color: #295558;
 color: black;
 text-align: center;
 z-index: 1;
}

.textpulse {
 text-shadow: 1px 1px 1px black;
 -webkit-animation: nuclearcolor 4s infinite;
 animation: nuclearcolor 4s infinite;
}

#titlediv2 {
 position: absolute;
 left: 250px;
 top: 212px;
 font-size: 30pt;
 color: black;
 -webkit-animation: nuclearcolor 5s infinite;
 animation: nuclearcolor 5s infinite;
 text-shadow: 2px 2px 4px black;
 opacity: .4;
}

@-webkit-keyframes nuclearcolor {
 0% {
 text-shadow: 1px 1px 1px #36AB06;
 }
 70% {
 text-shadow: 1px 1px 5px #ADF048;
 }
 75% {
 #53EF05;
 }
 100% {
 text-shadow: 1px 1px 1px #36AB06;
 }
}

@keyframes nuclearcolor {
 0% {
 text-shadow: 1px 1px 1px #36AB06;
 }
 75% {
 text-shadow: 1px 1px 5px #ADF048;
 }
 75% {
 #53EF05;
 }
 100% {
 text-shadow: 1px 1px 1px #36AB06;
 }
}

#coverdiv1 {
 position: absolute;
 top: 180px;
 left: 220px;
 height: 140px;
 width: 200px;
 border-left: 1px solid #36AC07;
 opacity: .5;
}

#coverdiv2 {
 position: absolute;
 top: 140px;
 left: 260px;
 height: 200px;
 width: 190px;
 border-top: 1px solid #36AC07;
 opacity: .5;
}

body {
 background: white;
}

@keyframes loop1 {
 0% {
 margin-top: 140px;
 opacity: 1;
 }
 10% {
 margin-top: 140px;
 opacity: 1;
 }
 20% {
 margin-top: 0px;
 opacity: 1;
 }
 30% {
 opacity: 0;
 }
 70% {
 opacity: 0;
 }
 80% {
 margin-top: 0px;
 opacity: 1;
 }
 90% {
 margin-top: 140px;
 opacity: 1;
 }
 100% {
 margin-top: 140px;
 opacity: 1;
 }
}

@-webkit-keyframes loop1 {
 0% {
 margin-top: 140px;
 }
 1% {
 opacity: 1;
 }
 20% {
 margin-top: 0px;
 }
 80% {
 margin-top: 0px;
 }
 99% {
 opacity: 1;
 }
 100% {
 margin-top: 140px;
 opacity: 0;
 }
}

@-webkit-keyframes loop2 {
 0% {
 margin-left: 190px;
 opacity: 1;
 }
 10% {
 margin-left: 190px;
 opacity: 1;
 }
 20% {
 margin-left: 0px;
 opacity: 1;
 }
 30% {
 opacity: 0;
 }
 70% {
 opacity: 0;
 }
 80% {
 margin-left: 0px;
 opacity: 1;
 }
 90% {
 margin-left: 190px;
 opacity: 1;
 }
 100% {
 margin-left: 190px;
 opacity: 1;
 }
}

@keyframes loop2 {
 0% {
 margin-left: 190px;
 opacity: 1;
 }
 10% {
 margin-left: 190px;
 opacity: 1;
 }
 20% {
 margin-left: 0px;
 opacity: 1;
 }
 30% {
 opacity: 0;
 }
 70% {
 opacity: 0;
 }
 80% {
 margin-left: 0px;
 opacity: 1;
 }
 90% {
 margin-left: 190px;
 opacity: 1;
 }
 100% {
 margin-left: 190px;
 opacity: 1;
 }
}

#div1 {
 position: absolute;
 top: 180px;
 left: 220px;
 border-left: 1px solid #ADF048;
 height: 5px;
 width: 2px;
 -webkit-animation: loop1 4s infinite;
 animation: loop1 4s infinite;
 opacity: 0;
}

#div2 {
 margin-left: 140px;
 position: absolute;
 top: 140px;
 left: 260px;
 border-top: 1px solid #ADF048;
 height: 2px;
 width: 5px;
 -webkit-animation: loop2 4s 2s infinite;
 animation: loop2 4s 2s infinite;
 opacity: 0;
}

#ongaku {
 border-radius: 5px;
 width: 25px;
 height: 20px;
 overflow: hidden;
 background-color: black;
 opacity: .8;
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
}

.musicgif {
 margin: 5px;
 margin-top: 2px;
 margin-bottom: 5px;
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
}

#ongaku:hover .musicgif {
 margin-top: -18px;
 background-color: black;
}

#ongaku:hover {
 background-color: black;
}

#musicpl {
 width: 20px;
 overflow: hidden;
 height: 20px;
 background-color: black;
}

#linkshere{
 position: absolute;
 height: 100px;
 top: 40px;
 width: 200px;
 text-align: left;
 border: 0px solid black;
 line-spacing: 20px;
 font-size: 13pt;
 word-spacing: 70px;
}

#linkshere a{color: gray; font-style: none; text-decoration: none;
-webkit-transition: all 1s;}
#linkshere a:hover{color: green;}

#tabdemonstration{height: 400px;
width: 400px;
border: 0px solid black;
position: absolute;
left: 000px;
top: 000px;}

#tabline1{
 position: absolute;
 left: 50px;
 top: 88px;
 height: 1px;
 width: 0px;
 background: #36AC07;
 -webkit-transition: all 1s;
transition: all 1s;
}
#tabline2{
 position: absolute;
 top: 89px;
 left: 74px;
 width: 1px;
height: 0px;
background: #36AC07;
-webkit-transition: all 1s;
transition: all 1s;}

#tablineB1{
 position: absolute;
 left: 50px;
 top: 113px;
 height: 1px;
 width: 0px;
 background: #36AC07;
 -webkit-transition: all 1s;
transition: all 1s;
}
#tablineB2{
 position: absolute;
 top: 113px;
 left: 74px;
 width: 1px;
height: 0px;
background: #36AC07;
-webkit-transition: all 1s;
transition: all 1s;}

#tablineC1{
 position: absolute;
 left: 50px;
 top: 138px;
 height: 1px;
 width: 0px;
 background: #36AC07;
 -webkit-transition: all 1s;
 transition: all 1s;
}
#tablineC2{
 position: absolute;
 top: 138px;
 left: 74px;
 width: 1px;
height: 0px;
background: #36AC07;
 -webkit-transition: all 1s;
 transition: all 1s;}

#tabline3{position: absolute;
top: 180px;
 left: 74px;
 height: 1px;
 width: 0px;
background: #36AC07;
-webkit-transition: all 1s;
transition: all 1s;}

#tabline4{position: absolute;
height: 0px;
width: 1px;
left: 164px;
top: 180px;
background: #36AC07;
-webkit-transition: all 1s;
transition: all 1s;}

.textcontainer{
position: absolute;
 top: 142px;
 left: 223px;
 height: 100%;
 width: 100%;
}

#tabline1, #tabline2,
#tablineB1, #tablineB2,
#tablineC1, #tablineC2,
#tabline3, #tabline4{
background: #36AC07;
 opacity: .6;
}

#contentbox{
 position: absolute;
 border: 1px solid transparent;
 top: 200px;
 left: 70px;
 width: 200px;
 height: 50px;
 opacity: 0;
 -webkit-transition: all 1s;
transition: all 1s;
 text-align: center;
 font-size: 10pt;
 font-family: 'Architects Daughter', cursive;
 color: black;
 box-sizing: border-box;
 padding: 4px;
 padding-top: 0px;
 color: grey;
}

#contentbox .ugh{font-size: 15px;
 font-weight: 800;
font-family: 'Shadows Into Light', Arial;
color: green;
}

.textcontainer:target #tabline1{width: 25px;
-webkit-transition: all .6s 1s;
transition: all .6s 1s;}
.textcontainer:target #tabline2{height: 91px;
-webkit-transition: all .8s 1.4s;
transition: all .8s 1.4s;}
.textcontainer:target #tablineB1{width: 25px;
-webkit-transition: all .6s 1s;
transition: all .6s 1s;}
.textcontainer:target #tablineB2{height: 67px;
-webkit-transition: all .8s 1.4s;
transition: all .8s 1.4s;}
.textcontainer:target #tablineC1{width: 25px;
-webkit-transition: all .6s 1s;
transition: all .6s 1s;}
.textcontainer:target #tablineC2{height: 42px;
-webkit-transition: all .8s 1.4s;
transition: all .8s 1.4s;}
.textcontainer:target #tabline3{width: 90px;
-webkit-transition: all .9s 2.2s;
transition: all .9s 2.2s;}
.textcontainer:target #tabline4{height:20px;
-webkit-transition: all .6s 3.0s;
transition: all .6s 3.0s;}
.textcontainer:target #contentbox{opacity: .6;
-webkit-transition: all 1s 3.2s;
transition: all 1s 3.2s;
-webkit-animation: blinker 4s infinite;
animation: blinker 4s infinite;}


@-webkit-keyframes blinker{
 0%{border-top: 1px solid #36AC07;
 border-right: 1px solid transparent;
 border-bottom: 1px solid transparent;
 border-left: 1px solid transparent;}
 25%{border-top: 1px solid transparent;
 border-right: 1px solid #36AC07;
 border-bottom: 1px solid transparent;
 border-left: 1px solid transparent;}
 50%{border-top: 1px solid transparent;
 border-right: 1px solid transparent;
 border-bottom: 1px solid #36AC07;
 border-left: 1px solid transparent;}
 75%{border-top: 1px solid transparent;
 border-right: 1px solid transparent;
 border-bottom: 1px solid transparent;
 border-left: 1px solid #36AC07;}
 100%{border-top: 1px solid #36AC07;
 border-right: 1px solid transparent;
 border-bottom: 1px solid transparent;
 border-left: 1px solid transparent;}
}

@keyframes blinker{
 0%{border-top: 1px solid #36AC07;
 border-right: 1px solid transparent;
 border-bottom: 1px solid transparent;
 border-left: 1px solid transparent;}
 25%{border-top: 1px solid transparent;
 border-right: 1px solid #36AC07;
 border-bottom: 1px solid transparent;
 border-left: 1px solid transparent;}
 50%{border-top: 1px solid transparent;
 border-right: 1px solid transparent;
 border-bottom: 1px solid #36AC07;
 border-left: 1px solid transparent;}
 75%{border-top: 1px solid transparent;
 border-right: 1px solid transparent;
 border-bottom: 1px solid transparent;
 border-left: 1px solid #36AC07;}
 100%{border-top: 1px solid #36AC07;
 border-right: 1px solid transparent;
 border-bottom: 1px solid transparent;
 border-left: 1px solid transparent;}
}


</style>




<div id="whole">
 <div id="titlediv1"><font class="textpulse" color="black">nuclear</font> <a href=#nothing style="color: black; text-decoration: none;">flame</a>
 <div id="linkshere">● <a href=#firstlink>undesired</a>
 <br> ● <a href=#secondlink>unbroken</a>
 <br> ● <a href=#thirdlink>unforgiving</a>
 </div>
 </div>

 <div id="coverdiv1">
 </div>

 <div id="coverdiv2">
 </div>

 <div id="div1">
 </div>

 <div id="div2">
 </div>

 <div style="position: fixed; left: 220px;
top: 141px; z-index: 3;">
 <div id="ongaku">
 <div class="musicgif"><img src="http://i60.tinypic.com/330vbd1.jpg" height=16px></div>
 <div id="musicpl" >
<div style="overflow: hidden; width: box-sizing: border-box; width: 14px; margin-left: -3px; zoom: 150%; margin-top: -5px;">
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="129" height="20">
 <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />
 <param name="wmode" value="transparent" />
 <param name="FlashVars" value="mp3=https://www.dropbox.com/s/mpyzyglk7yrgbzn/Melanie%20Toxic.mp3?dl=1&autoplay=1&loop=1&volume=10&bgcolor1=000000&bgcolor2=000000&slidercolor1=65398E&slidercolor2=65398E&buttoncolor=AEF149" />
</object>
</div>

 </div>
 </div>
</div>


 <div id="tabdemonstration">
 <div class="textcontainer" id="firstlink">
 <div id="tabline1">
 </div>
 <div id="tabline2">
 </div>
 <div id="tabline3">
 </div>
 <div id="tabline4">
 </div>
 <div id="contentbox">
 <font class="ugh">identity</font> is simply <b>Rhai</b>
 <br>
 <font class="ugh">age</font> is never disclosed
 </div>
 </div>


 <div class="textcontainer" id="secondlink">
 <div id="tablineB1">
 </div>
 <div id="tablineB2">
 </div>
 <div id="tabline3">
 </div>
 <div id="tabline4">
 </div>
 <div id="contentbox">
 <font class="ugh">do</font> be respectful<br>
 <font class="ugh">do not</font> be ignorant, malicious
 </div>
 </div>


 <div class="textcontainer" id="thirdlink">
 <div id="tablineC1">
 </div>
 <div id="tablineC2">
 </div>
 <div id="tabline3">
 </div>
 <div id="tabline4">
 </div>
 <div id="contentbox">
 <font class="ugh">code</font> is <b>mine</b>, have at it<br>
 <font class="ugh">discover</font> details through play
 </div>
 </div>

 </div>

 </div>

</div>