Caifix

<style>

body{overflow: hidden;}

body, a, a:hover, a:active, a:visited {
cursor:url(http://puu.sh/n6Nr5/93416114dc.png), auto !important;}

.pfor {display: none;}
#profile{background: transparent; border: 0px;}


/* INTRO TRANSITION --- START */

#whole2{
 position: fixed;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background: #535762;
 z-index: 2;
 -webkit-transition: all 1s 1s;
 transition: all 1s 1s;
cursor:help;
opacity: 0;
}

#whole3 img{
 position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;}


#whole3{position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 1;
 background: #535762;}


#whole{
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
z-index: -1;
}

#reliefcheck:checked ~ #whole3{
z-index: 10;
}

#whole{
}

#reliefcheck:checked ~ #whole3 #whole{
opacity: 1;
z-index: 1;
-webkit-transition: all 1s 2.2s, opacity 1s 2s;
transition: opacity all 1s 2.2s, opacity1s 2s;
}

#reliefcheck:checked ~ #whole3 img{
transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transition: all 2s, opacity 1s 1s;
-webkit-transition: all 2s, opacity 1s 1s;
opacity: 0;}





/* INTRO TRANSITION -- END */



#whole{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background-image: url(http://i68.tinypic.com/29ku91h.jpg);
 background-repeat: repeat;
 overflow: hidden;
}

#imageframe{
 position: absolute;
 top: 0px;
 left: -200px;
 right: 0px;
 bottom: 0px;
 margin: auto;
 height: 300px;
 width: 300px;
 background-image:url(http://pre02.deviantart.net/00fb/th/pre/i/2015/332/2/e/det_var_han_by_caicyo-d9fep9m.png);
 background-repeat: no-repeat;
 background-position: top right -100px;
 background-size: auto 300%;
 overflow: hidden;
 z-index: 1;
 opacity: .9;
 box-shadow: 1px 1px 3px 2px black;
 z-index: 5;
-webkit-transition: all 1s;
transition: all 1s;
}

#whole:hover #imageframe{
left: -500px;}

#firstdiv{
 position: absolute;
}

.blurring{
 filter:blur(10px);
 -webkit-filter:blur(10px);
 opacity: 1;
 background: black;
}

#topside{
 position: absolute;
 left: 0px;
 top: -10px;
 right: 0px;
 height: 20px;
}

#leftside{
 position: absolute;
 top: 0px;
 left: -10px;
 bottom: 0px;
 width: 20px;
}

#rightside{
 position: absolute;
 right: -10px;
 top: 0px;
 bottom: 0px;
 width: 20px;
}

#bottomside{
 position: absolute;
 bottom: -10px;
 left: 0px;
 right: 0px;
 height: 20px;
}

#doubleframe{
 position: absolute;
 top: 8px;
 left: 8px;
 right: 8px;
 bottom: 8px;
 background-image:url(http://pre02.deviantart.net/00fb/th/pre/i/2015/332/2/e/det_var_han_by_caicyo-d9fep9m.png);
 background-repeat: no-repeat;
 background-position: top right -100px;
 background-size: auto 300%;
 opacity: .5;
-webkit-transition: all 1s;
transition: all 1s;
}

#whole:hover #doubleframe{
opacity: 1;}

#backgroundstuff{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 z-index: 0;
 opacity: .7;
 background-color: #191F2F;
}

@font-face{
src:url(https://dl.dropboxusercontent.com/u/4556289/Heartbeat%20Synchronicity.ttf);
 font-family:'titlefont';
}

#titlearea{
 position: absolute;
 font-family: 'titlefont';
 font-size: 23pt;
 text-align: center;
top: 0px;
 bottom: 330px;
 left: -200px;
 right: 0px;
 margin: auto;
 height: 50px;
 width: 300px;
 color: black;
 text-shadow: 1px 1px 5px #191F2F;
 text-transform:uppercase;
 letter-spacing: 6px;
 opacity: .8;
-webkit-transition: all 1s;
transition: all 1s;
}

#whole:hover #titlearea{
left: -500px;}

#titlearea b{
 color: #B15419;
 font-weight: 400;
}


/* --------------

SWITCH DIV START

-----------------*/

#contentswitch{
 position: absolute;
 top: 75px;
bottom: 0px;
 left: 0px;
 right: 0px;
 margin: auto;
 width: 800px;
 height: 400px;
 border: 0px solid black;
 overflow: hidden;
 -webkit-transition: all 1s;
 transition: all 1s;
 filter:blur(2px);
 -webkit-filter:blur(2px);
 opacity: 0;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#whole:hover #contentswitch{
 -webkit-transition: all 1s .5s, right 1s, opacity 1s 0s;
 transition: all 1s .5s, right 1s, opacity 1s 0s;
 right: -300px;
 opacity: 1;
 filter:blur(0px);
 -webkit-filter:blur(0px);
}

.contentbox{
 position: absolute;
 height: 294px;
 width: 300px;
 border: 0px solid black;
 left: -300px;
 top: 2px;
 opacity: 0;
 -webkit-transition: all 1s, opacity .4s;
 transition: all 1s, opacity .4s;
 -webkit-transition-timing-function: linear;
 transition-timing-function: linear;
}

/* LINK DETAILS */

.thelink{position: absolute;
bottom: 100px;
left: 0px;
right: 0px;
 margin: auto;
 height: 10px;
 width: 200px;
border: 0px solid black;
background: white;
-webkit-transition: all 1s;
transition: all 1s;
z-index: 0;
background: #080913;
 overflow: hidden;
 border-radius: 7px 7px 7px 7px;
 opacity: .3;
}

#thebar{
 position: absolute;
 top: 2px;
 bottom: 2px;
 left: 30px;
 right: 30px;
 background: orange;
 -webkit-transition: all 1s;
 transition: all 1s;
 background: #B15419;
 border-radius: 7px 7px 7px 7px;
-webkit-animation: barpulse 2s infinite;
animation: barpulse 2s infinite;
}

.thelink:hover #thebar{
 left: 10px;
 right: 10px;
}

@-webkit-keyframes barpulse{
0%{background: #B15419;}
50%{ background: orange;}
100%{background: #B15419;}
}

@keyframes barpulse{
0%{background: #B15419;}
50%{ background: orange;}
100%{background: #B15419;}
}

/* CONTENT DETAILS */


::-webkit-scrollbar {
 width: 4px;
 background-color: transparent;
}


::-webkit-scrollbar-thumb {
 border-radius: 0px;
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
 background-color: #111111;
}


.contentbox *{
 box-sizing: border-box;
 text-align: left;
 border: 0px solid #171823;
}

#basics{
 position: absolute;
 left: 0px;
 right: 0px;
 top: 30px;
 margin: auto;
 height: 28px;
 width: 270px;
 opacity: .9;
}

#personality{
 position: absolute;
 left: 0px;
 right: 0px;
 bottom: 20px;
 margin: auto;
 height: 200px;
 width: 230px;
 opacity: .9;
}


#history{
 position: absolute;
 left: 0px;
 right: 0px;
 top: 0px;
 bottom: 0px;
 margin: auto;
 height: 250px;
 width: 230px;
 opacity: .9;
}

#likes{
 position: absolute;
 left: 0px;
 right: 150px;
 top: 0px;
 bottom: 0px;
 margin: auto;
 height: 230px;
 width: 130px;
 opacity: .9;
}

#dislikes{
 position: absolute;
 left: 150px;
 right: 0px;
 top: 0px;
 bottom: 0px;
 margin: auto;
 height: 230px;
 width: 130px;
 opacity: .9;
}

#ooc{
 position: absolute;
 left: 0px;
 right: 0px;
 top: 0px;
 bottom: 0px;
 margin: auto;
 height: 170px;
 width: 230px;
 opacity: .9;
}

#backgroundfiller{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background: #171823;
 opacity: .5;
 border: 0px;
}

#innercontent{
 position: absolute;
 top: 2px;
 left: 2px;
 right: 2px;
 bottom: 2px;
 border: 3px solid #171823;
 text-align: left;
 color: black;
 font-family: 'titlefont';
 font-size: 11pt;
 overflow: hidden;
 letter-spacing: 2px;
 padding-left: 2px;
}

#innercontent b{
 letter-spacing: 1.5px;
 color: #995127;
 text-shadow: 1px 1px 5px black;
 font-style: italic;
 text-transform: uppercase;
}

@font-face{
 src:url(https://dl.dropboxusercontent.com/u/4556289/TreeFTR.ttf);
 font-family:'textfont';
}

#innercontent2{
 position: absolute;
 top: 20px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 overflow: auto;
 padding-left: 2px;
 padding-right: 2px;
 padding-bottom: 5px;
 font-size: 11pt;
 font-family:'textfont';
 font-weight: 600;
 letter-spacing: 1px;
}

/* NEUTRAL */

#firstbox{
 left: 250px;
 opacity: 1;
}

#firstlink{
 z-index: 1;
}


/* condition 1 */
#condition1:target #secondlink{
 z-index: 2;
}

#condition1:target #secondbox{
 left: 250px;
 opacity: 1;
}

#condition1:target #firstbox{
 left: 1000px;
 opacity: 0;
}

/* condition 2 */

#condition2:target #thirdlink{
 z-index: 2;
}

#condition2:target #thirdbox{
 left: 250px;
 opacity: 1;
}

#condition2:target #secondbox{
 left: 1000px;
}

#condition2:target #firstbox{
 left: 1000px;
 opacity: 0;
}


/* condition 3 */

#condition3:target #fourthlink{
 z-index: 2;
}

#condition3:target #fourthbox{
 left: 250px;
 opacity: 1;
}

#condition3:target #thirdbox{
 left: 1000px;
}

#condition3:target #firstbox{
 left: -300px;
 opacity: 0;
}

/* condition 4 */

#condition4:target #fourthbox{
 left: 1000px;
}

#condition4:target #firstbox{
 left: 250px;
 opacity: 1;
}

/* all conditions */

#condition1:target #secondbox,
#condition2:target #thirdbox,
#condition3:target #fourthbox,
#condition4:target #firstbox{
 -webkit-transition: all 1s, opacity .4s .35s;
}

/* --------------

SWITCH DIV END

-----------------*/

/* MUSIC PLAYER */


#musiccontainer{
 position: absolute;
 bottom: 10px;
 left: 10px;
 height: 20px;
 width: 21px;
 border: 0px solid black;
background: #11101A;
-webkit-transition: all 1s;
transition: all 1s;
overflow: hidden;
}

#musiccontainer:hover{
width: 200px;}

#playerhold{
 position: absolute;
 left: 0px;
 top: 0px;
 height: 20px;
 width: 200px;
 border: 0px solid black;
overflow: hidden;
}

#playerholdzoom{
 position: absolute;
 height: 100%;
 width: 35px;
 border: 0px solid red;
 overflow: hidden;
margin-left: -25px;
margin-top: 0px;
}

#detailshold{
 position: absolute;
 left: 22px;
 top: 0px;
 height: 20px;
 width: 180px;
 font-family: 'titlefont';
 font-size: 11pt;
 letter-spacing: 3px;
 color: black;
box-sizing: border-box;
padding-left: 2px;
padding-top: 1px;
color: #545863;
overflow: hidden;
text-transform: uppercase;
}

#detailshold b{
color: #B15419; }

/* ADJUSTMENT */


#musiccontainer{
 position: absolute;
 bottom: 10px;
 left: 10px;
 height: 24px;
 width: 23px;
-webkit-transition: all 1s;
transition: all 1s;
overflow: hidden;
border-radius: 3px 3px 3px 3px;
 opacity: .8;
}

#musiccontainer:hover{
width: 200px;}

#playerhold{
 position: absolute;
 left: 0px;
 top: 0px;
 height: 24px;
 width: 200px;
 border: 0px solid black;
overflow: hidden;
}

#playerholdzoom{
 position: absolute;
 height: 115%;
 width: 35px;
 border: 0px solid red;
 overflow: hidden;
margin-left: -12px;
margin-top: -3px;
}

#detailshold{
 position: absolute;
 left: 22px;
 top: 0px;
 height: 20px;
 width: 180px;
 font-family: 'Audiowide';
 font-size: 11pt;
 letter-spacing: 3px;
 color: black;
box-sizing: border-box;
padding-left: 2px;
padding-top: 2px;
overflow: hidden;
text-transform: uppercase;
}




</style>

<input type="checkbox" for="reliefcheck" id="reliefcheck" />
<label for="reliefcheck">
<div id="whole2">
</div></label>

<div id="whole3">

 <img src="http://owsla.com/wp-content/uploads/2016/01/logo-black.png" height="30%">

<div id="whole">
 <div id="imageframe">
 <div id="topside" class="blurring">
 </div>
 <div id="leftside" class="blurring">
 </div>
 <div id="rightside" class="blurring">
 </div>
 <div id="bottomside" class="blurring">
 </div>
 <div id="doubleframe">
 </div>
 </div>

 <div id="backgroundstuff">
 </div>

 <div id="titlearea">
 <b>C</b>haracter <b>N</b>ame
 </div>



<div id="condition1">
 <div id="condition2">
 <div id="condition3">
 <div id="condition4">


 <div id="contentswitch">

 <div id="firstbox" class="contentbox">
 <div id="basics">
 <div id="backgroundfiller">
 </div>
 <div id="innercontent" style="text-align: center;">
 <b>name</b> / age / <b>species</b> / M/F</b>
 </div>
 </div>

 <div id="personality">
 <div id="backgroundfiller">
 </div>
 <div id="innercontent">
 <b>personality</b>
 <div id="innercontent2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </div>


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

 <div id="secondbox" class="contentbox">
 <div id="history">
 <div id="backgroundfiller">
 </div>
 <div id="innercontent">
 <b>history</b>
 <div id="innercontent2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </div>
 </div>
 </div>
 </div>
 <div id="thirdbox" class="contentbox">

 <div id="likes">
 <div id="backgroundfiller">
 </div>
 <div id="innercontent"><b>likes</b>
 <div id="innercontent2">
 likes<br>
 likes<br>
 likes<br>
 likes<br>
 likes<br>
 </div>
 </div>
 </div>

 <div id="dislikes">
 <div id="backgroundfiller">
 </div>
 <div id="innercontent">
 <b>dislikes</b>
 <div id="innercontent2">
 dislikes<br>
 dislikes<br>
 dislikes<br>
 dislikes<br>
 dislikes<br>
 </div>
 </div>
 </div>

 </div>
 <div id="fourthbox" class="contentbox">
 <div id="ooc">
 <div id="backgroundfiller">
 </div>
 <div id="innercontent">
 <b>ooc</b>
 <div id="innercontent2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </div>
 </div>
 </div>
 </div>

 <a href="#condition1" id="firstlink" class="thelink">
 <div id="thebar">
 </div>
 </a>
 <a href="#condition2" id="secondlink" class="thelink">
 <div id="thebar">
 </div>
 </a>
 <a href="#condition3" id="thirdlink" class="thelink">
 <div id="thebar">
 </div>
 </a>
 <a href="#condition4" id="fourthlink" class="thelink">
 <div id="thebar">
 </div>
 </a>

 </div>

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


<div id="musiccontainer">
<div id="playerhold">
<div id="playerholdzoom">
<audio controls src="http://puu.sh/n6LvG/c9fb36c577.mp3"></audio>
</div>
</div>
<div id="detailshold">
 <div id="marqueeholder">
 <marquee direction="left" scrollamount="5">
 <b>H</b>AYWYRE / <b>I AM YOU</b> / <b>T</b>WO FOLD, PT. 2
 </marquee>

</div>
</div>

</div>

</div>
</div>