Joji

<style>

@font-face{
font-family:'bodyfont';
src:url(https://dl.dropboxusercontent.com/u/4556289/JAPAB_.TTF);}

#whole{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background-image:url(http://i.imgur.com/23JOLSa.jpg);
 background-size: 100% auto;
 background-color: black;
 background-position: top right;
 overflow: hidden;
 -webkit-filter:saturate(80%);
 opacity: .4;
 background-repeat: no-repeat;
 -webkit-transition: all 1s;
 transition: all 1s;
 -webkit-filter:blur(1px);
border: 10px solid black;
}

body{overflow: hidden;
background: black;}

#centercircle{
 position: absolute;
height: 700px;
 width: 700px;
 border: 1px solid black;
 box-sizing: border-box;
 border-radius: 360px;
 left: 0px;
 right: 0px;
 bottom: 5vh;
 margin: auto;
 overflow: hidden;
 border:0px solid black;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#centercircle:after{
 content:'';
 position: absolute;
 top: -15px;
 left: -15px;
 right: -15px;
 bottom: -15px;
 background: transparent;
 border: 20px solid black;
 border-radius: 360px;
 z-index: 2;
}

#centercircle:before{
 content:'';
 position: absolute;
 top: -30px;
 left: 0px;
 right: -30px;
 bottom: -30px;
 background-image:url(http://i.imgur.com/rUIMf6a.png);
 border-radius: 360px;
 background-size: auto 110%;
 background-position: center center;
 z-index: 1;
 opacity: 1;
 overflow: hidden;
 border: 10px solid transparent;
 box-sizing: border-box;
 background-repeat: no-repeat;
 -webkit-transition: all 1s;
 transition: all 1s;
 -webkit-filter:saturate(100%);
}

#circleincrease{
 position: absolute;
 top: 0px;
 left: 00px;
 right: 00px;
 bottom: 0px;
 border-radius: 360px;
 box-sizing: border-box;
 border: 10px solid black;
 border-bottom: 10px solid black;
 z-index: 5;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#leetspeak{
 position: absolute;
 top: 120px;
 left: 70px;
 height: 200px;
 width: 200px;
 z-index: 6;
 font-size: 70pt;
 text-align: center;
 color: #6D3A16;
 text-shadow: 0px 0px 6px white;
 font-weight: 600;
 font-family:'Times New Roman', Arial;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#transitiondiv:target ~ #centercircle #circleincrease{
 -webkit-transition: all 2s;
 transition: all 2s;
 border-bottom: 350px solid black;
}

#transitiondiv:target ~ #centercircle{
 -webkit-transition: all 2s;
 transition: all 2s;
 bottom: -280px;
}

#transitiondiv:target ~ #centercircle:after{
 -webkit-transition: all 2s;
 transition: all 2s;
 background-color: rgba(0, 0, 0, 0.80);
}

#textbit{
 position: absolute;
 bottom: 285px;
 left: 12px;
 height: 60px;
 width: 680x;
 border: 0px solid red;
 box-sizing: border-box;
 z-index: 7;
 color: #175025;
 text-align: justify;
 font-family: 'bodyfont', Times New Roman, Arial;
 font-size: 10px;
 padding-left: 0px;
 padding-top: 0px;
 opacity: 0;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#transitiondiv:target ~ #centercircle #textbit{
 -webkit-transition: all 2s 1s ease-in;
 transition: all 2s 1s ease-in;
 opacity: 1;
}

.spreader{
 float: left;
 margin-left: 10px;
letter-spacing: .02px;
}

.spreader:nth-child(6){
margin-left: 0px;}


.spreader:after,
.oocspread:after{
 content:'⌋';
 margin-left: 3px;
 font-weight: 600;
color: #6D3A16;
}

.spreader:before,
.oocspread:before{
 content:'⌈';
 margin-right:3px;
 font-weight:600;
color: #6D3A16;
}

.spreader:nth-child(1){
 margin-left: 0px;
}

.oocspread{
 float: right;
 margin-top: 8px;
margin-right: 17px;
 color: #6D3A16;
 text-align: left;
}

.spreader{
 margin-top: 7px;
}

.oocspread a{
 font-weight: 800;
 text-decoration: underline;
 color: #6D3A16;
}

.oocspread a:hover{
color: gray;}

#leetspeak a{
 color: #6D3A16;
 text-decoration: none;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#leetspeak a:hover,
#transitiondiv:target ~ #centercircle #leetspeak a{
 -webkit-transition: all .5s;
 transition: all .5s;
 text-shadow: 0px 0px 3px black;
}

#jojipop{
 position: absolute;
 bottom: 70px;
 left: 500px;
 right: 0px;
 margin: auto;
 height: 700px;
 width: 300px;
 border: 0px solid red;
 z-index: 8;
 background-image:url(http://i.imgur.com/lUB6BuI.png);
 background-repeat: no-repeat;
 background-size: auto 100%;
 background-position: center bottom -30px;
 opacity: 0;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#transitiondiv:target ~ #jojipop{
 -webkit-transition: all 2s 2s;
 transition: all 2s 2s;
 opacity: 1;
}

#musicbox{
 position: absolute;
 z-index: 10;
 right: 145px;
 top: 10px;
 height: 50px;
 width: 100px;
 border: 10px solid black;
 background-image:url(http://i.imgur.com/xDW9LUj.png);
 background-repeat: no-repeat;
 background-size: 90% auto;
 background-position: center;
 background-color: #574E1E;
 -webkit-transition: all .5s;
 transition: all .5s;
 overflow: hidden;
}

#musicbox:hover{
 background-color: gray;
}

#musicbox:active{
 -webkit-transition: all .1s;
 transition: all .1s;
 background-color:#0C1E13;
}

#musicbox audio{
 zoom: 400%;
 margin-left: 0px;
 width: 70px;
 opacity: 0;
}

</style>

<div id="transitiondiv"></div>

<div id="whole">

 </div>

 <div id="centercircle">
 <div id="circleincrease">
 </div>
 <div id="leetspeak">
 <a href="#transitiondiv">丈<br>
 慈</a>
 </div>
 <div id="textbit">

 <div class="spreader">name ━ <b>joji</b></div>

 <div class="spreader">age ━ <b>twenty-three</b></div>

 <div class="spreader">height ━ <b> five-eight</b></div>

 <div class="spreader">build ━ <b>slim</b></div>

 <div class="spreader">species ━ <a title="Mix of various rodent and fox traits.">mouse mix</a></div>

 <div class="spreader">clan ━ <b>juntoku</b></div>

 <div class="spreader">classification ━ <b>assassin</b></div>

 <div class="oocspread">
 pm friendly / art is owned / code is <a target="_blank" href="http://roleplay.chat/profile.php?user=Digital" target=_blank>mine</a>.
 </div>

 </div>
 </div>

<div id="jojipop">
</div>

<div id="musicbox">
 <audio controls src="http://k003.kiwi6.com/hotlink/vz3r4nwxg7/Mura_Masa_-_Suicide_Blades_VOL.mp3" loop=3 />
</div>