BEFORE XMAS

---- STYLE -----

*{cursor:url(http://www.rw-designer.com/cursor-extern.php?id=1675), default;
}

label, a{cursor:url(http://www.rw-designer.com/cursor-extern.php?id=1676), default !important;
}

@font-face{
 src: url(https://dl.dropboxusercontent.com/s/d9ihnqs25298288/somepx.ttf?dl=0);
 font-family: 'bodyfont';
}

@font-face{
src:url(https://dl.dropboxusercontent.com/s/94hr6y0cm4un4at/secuencia.ttf?dl=0);
font-family:'bodyfont2';}

#whole{
 position: fixed;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background: white;
background-image:url(https://www.transparenttextures.com/patterns/noise-pattern-with-subtle-cross-lines.png);
}

::-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: black;
}

#centerhost{
 position: absolute;
 top: 50px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 margin: auto;
 height: 480px;
 width: 430px;
 border: 0px solid black;
 -webkit-transition: all 2s;
 transition: all 2s;
}

.glasspanes{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 50px;
 bottom: 50px;
 margin: auto;
 height: 400px;
 width: 300px;
box-shadow: 1px 1px 3px black;
 z-index: 3;
 -webkit-transition: all 1s;
 opacity: 1;
 background: transparent;
}

.glasspanes:before{
 content:'';
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background: white;
 z-index: -1;
 opacity: .9;
}

.glasspanes:after{
 content:'';
 position: absolute;
 top: 0px;
 left: 0px;
 right: -25px;
 bottom: -25px;
 border: 0px solid red;
 z-index: -1;
}

.glasspanes:nth-child(2){
 z-index: 2;
right: 25px;
 bottom: 25px;
 opacity: .5;
}

.glasspanes:nth-child(3){
 z-index: 1;
right: 0px;
 bottom: 0px;
 opacity: .2;
}

.glasspanes:nth-child(2) .exitlink,
.glasspanes:nth-child(3) .exitlink{
 opacity: 0;
}

#div1:target ~ #centerhost .glasspanes:nth-child(1),
#div2:target ~ #centerhost .glasspanes:nth-child(2),
#div3:target ~ #centerhost .glasspanes:nth-child(3){
 right:50px;
 bottom: 50px;
 z-index: 3;
 opacity: 1;
 -webkit-transition: all 1s .5s, opacity 1s;
 transition: all 1s .5s, opacity 1s;
}

#div1:target ~ #centerhost .glasspanes:nth-child(1) #contentss,
#div2:target ~ #centerhost .glasspanes:nth-child(2) #contentss,
#div3:target ~ #centerhost .glasspanes:nth-child(3) #contentss{
 -webkit-transition: all 1s;
 transition: all 1s;
 opacity: 1;
}

#div1:target ~ #centerhost .glasspanes:nth-child(1) .exitlink,
#div2:target ~ #centerhost .glasspanes:nth-child(2) .exitlink,
#div3:target ~ #centerhost .glasspanes:nth-child(3) .exitlink{
 -webkit-transition: all 1s .5s;
 transition: all 1s .5s;
 opacity: 1;
}

#div1:target ~ #centerhost .glasspanes:nth-child(2),
#div2:target ~ #centerhost .glasspanes:nth-child(3),
#div3:target ~ #centerhost .glasspanes:nth-child(1){
 right: 25px;
 bottom: 25px;
 opacity: .5;
 -webkit-transition: all 1s .5s, opacity 1s;
 transition: all 1s .5s, opacity 1s;
 z-index: 2;
}

#div1:target ~ #centerhost .glasspanes:nth-child(2) #contentss,
#div2:target ~ #centerhost .glasspanes:nth-child(3) #contentss,
#div3:target ~ #centerhost .glasspanes:nth-child(1) #contentss{
 -webkit-transition: all 1s;
 transition: all 1s;
 opacity: 0;
}

#div1:target ~ #centerhost .glasspanes:nth-child(2) .exitlink,
#div2:target ~ #centerhost .glasspanes:nth-child(3) .exitlink,
#div3:target ~ #centerhost .glasspanes:nth-child(1) .exitlink{
 -webkit-transition: all 1s;
 transition: all 1s;
 opacity: 0;
}

#div1:target ~ #centerhost .glasspanes:nth-child(3),
#div2:target ~ #centerhost .glasspanes:nth-child(1),
#div3:target ~ #centerhost .glasspanes:nth-child(2){
 right:0px;
 bottom:0px;
 opacity: .3;
 -webkit-transition: all 1s .5s, opacity 1s;
 transition: all 1s .5s, opacity 1s;
 z-index: 1;
}

#div1:target ~ #centerhost .glasspanes:nth-child(3) #contentss,
#div2:target ~ #centerhost .glasspanes:nth-child(1) #contentss,
#div3:target ~ #centerhost .glasspanes:nth-child(2) #contentss{
 -webkit-transition: all 1s;
 transition: all 1s;
 opacity: 0;
}

#div1:target ~ #centerhost .glasspanes:nth-child(3) .exitlink,
#div2:target ~ #centerhost .glasspanes:nth-child(1) .exitlink,
#div3:target ~ #centerhost .glasspanes:nth-child(2) .exitlink{
 -webkit-transition: all 1s;
 transition: all 1s;
 opacity: 0;
}

#contentss{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 20px;
 overflow: auto;
 box-sizing: border-box;
 padding: 10px;
 padding-right: 10px;
 text-align: justify;
 font-family:'bodyfont2', Times;
 font-size: 15pt;
 opacity: 0;
 -webkit-transition: all 1s;
 transition: all 1s;
 color: black;
}

#contentss a{
color: #013F63;
text-decoration: none;
font-weight: 800;}

#contentss a:hover{
text-decoration: underline;}

.exitlink{
 position: absolute;
 bottom: 0px;
 right: 0px;
 width: 20px;
 height: 20px;
 background-color: gray;
 background-image:url(http://i68.tinypic.com/2jbwnjp.jpg);
 background-repeat: repeat;
 background-size: auto 20%;
}

.coverpage{
 display: block;
 position: absolute;
 top: 0px;
 left: -10px;
 right: 20px;
 bottom: 0px;
 margin: auto;
 height: 500px;
 width: 350px;
 background-image:url(http://i67.tinypic.com/2yo5mar.jpg);
background-image:url(https://i.imgur.com/cDB0TT1.png);
 background-repeat: no-repeat;
 background-size: auto 105%;
 background-position: center top -5px;
 z-index:5;
 box-shadow: 1px 1px 5px transparent;
 background-color: white;
 -webkit-transition: all 1s;
 transition: all 1s;
}

.coverpage:hover{
 box-shadow: 1px 1px 5px black;
}


#div1:target ~ .coverpage,
#div2:target ~ .coverpage,
#div3:target ~ .coverpage{
 -webkit-transition: all 2s;
 transition: all 2s;
 left: -400px;
 box-shadow: 1px 1px 5px black;
}


#div1:target ~ #centerhost,
#div2:target ~ #centerhost,
#div3:target ~ #centerhost{
 left: 450px;
}

#titlediv{
 position: absolute;
 top: -15px;
 left: 42px;
 font-family:'bodyfont';
 font-size: 20pt;
 height: 20px;
 width: 150px;
 border: 0px solid black;
 opacity: 0;
 -webkit-transition: all 1s;
 transition: all 1s;
 z-index: 0;
 text-align: left;
 box-shadow: -1px 1px 2px black;
 box-sizing: border-box;
 padding-left: 2px;
 color: #013F63;
}

#titlediv:before{
content:'';
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: white;
opacity: .8;}

#lifter{
 position: absolute;
 bottom: -2px;
 left: 2px;
}

#div1:target ~ #centerhost #titlediv:nth-child(4),
#div2:target ~ #centerhost #titlediv:nth-child(5),
#div3:target ~ #centerhost #titlediv:nth-child(6){
 -webkit-transition: all 1s 1.3s;
 transition: all 1s 1.3s;
 opacity: 1;
 z-index: 1;
}

#musicplayer{
 position: fixed;
 top: 10px;
 height: 30px;
 width: 270px;
 border: 0px solid black;
 box-shadow: 1px 1px 2px transparent;
-webkit-transition: all 1s 1s;
transition: all 1s 1s;
right: 25%;
opacity: 0;
}

#musicplayer:hover{
 box-shadow: 1px 1px 2px #013F63;
-webkit-transition: all 1s;
transition: all 1s;}

#musicplayer:before{
content:'';
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: white;
opacity: 0;
z-index: -1;}

#audiocontain{
 position: absolute;
 left: 3px;
 bottom: 0px;
 width: 20px;
 height: 20px;
 overflow: hidden;
 border: 0px solid black;
}

.audiocontain2{
    position: absolute;
    margin-left: -10px;
    margin-top: -18px;
    zoom: 82%;
}

.textcontain{
 position: absolute;
 left: 24px;
 bottom: 0px;
 text-align: left;
 border: 0px solid black;
 height: 28px;
 width: 250px;
 color: #013F63;
 font-family:'bodyfont';
 font-size: 16pt;
 box-sizing: border-box;
 padding-top: 4px;
 text-transform: uppercase;
}

#totaltitle{
 position: absolute;
 font-size: 60pt;
 height: 82px;
 width: 100%;
  right: 0%;
 border: 0px solid black;
 bottom: 2%;
 color: #013F63;
 font-style: italic;
font-family:'bodyfont', 'Times';
zoom: 150%;
overflow: hidden;
 z-index: 6;
}

#statfloat1{
float: left;
height: 20px;
width: 200px;
text-align: left;
border: 0px solid black;
letter-spacing: 1px;
font-size: 15pt;
margin-left: 10px;
color: #013F63;
margin-bottom: 4px;}

#statfloat2{
float: left;
height: 20px;
width: 160px;
margin-left: 80px;
border: 0px solid black;
margin-bottom: 7px;
font-size: 13pt;
color: black;}

#statfloat2:before{
position: absolute;
margin-left: -20px;
font-weight: 800;
content:'|';
color: #013F63; }

#statfloat2:last-child{
margin-bottom: 0px;}

#song2, #song3, #song4{
opacity: 0;
}

#song11{
opacity: 1;
z-index: 2;
-webkit-transition: all 1s;
transition: all 1s;}
#song22,
#song33,
#song44{
opacity: 0;
z-index: 0;
-webkit-transition: all .5s;
transition: all .5s;}

#song2:checked ~ #whole #song11,
#song3:checked ~ #whole #song11,
#song4:checked ~ #whole #song11{
z-index: 0;
opacity: 0;
-webkit-transition: all .5s;
transition: all .5s;}

#song2:checked ~ #whole #song22,
#song3:checked ~ #whole #song33,
#song4:checked ~ #whole #song44{
opacity: 1;
z-index: 2;
-webkit-transition: all 1s;
transition: all 1s;}

#songuu{
position: fixed;
top: 45px;
width: 200px;
height: 30px;
z-index: 20;
border: 0px solid black;
box-sizing: border-box;
padding-top: 5px;
right: 27%;
opacity: 0;
}

.songselect{
float: left;
height: 15px;
width: 15px;
box-shadow: 0px 0px 3px #bbbfd3;
background: transparent;
margin-right: 20px;
opacity: .8;
-webkit-transition: all 1s;
transition: all 1s;}

.songselect:hover{
background:#013F63;}

#songselect1{
background: #013F63;
-webkit-animation: songspin 3s infinite linear;
animation: songspin 3s infinite linear;}

#song2:checked ~ #whole #songselect1,
#song3:checked ~ #whole #songselect1,
#song4:checked ~ #whole #songselect1{
background: transparent;
-webkit-animation: none;
animation: none;}

#song2:checked ~ #whole #songselect2,
#song3:checked ~ #whole #songselect3,
#song4:checked ~ #whole #songselect4{
background: #013F63;
-webkit-animation: songspin 3s infinite linear;
animation: songspin 3s infinite linear;}

@-webkit-keyframes songspin{
0%{-webkit-transform:rotate(0deg);
transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);
transform:rotate(360deg);}
}

@keyframes songspin{
0%{-webkit-transform:rotate(0deg);
transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);
transform:rotate(360deg);}
}

/* ADDITIONAL COVER */

#musicplayer{
-webkit-transition: all 1s;
transition: all 1s;
}

#selector{
position: fixed;
bottom: 15%;
left: 0px;
right: 0px;
margin: auto;
width: 200px;
height: 3px;
background: #013F62;
border-radius: 3px 3px 3px 3px;
-webkit-transition: all 1s;
transition: all 1s;
z-index: 9;
box-shadow: 0px 0px 7px #8c64e9;
-webkit-animation: boxpush2 1s linear infinite;
animation: boxpush2 1s linear infinite;}

#songuu{
z-index: 7;}

#musicplayer{
position: fixed;
z-index: 7;}

#selector:before{
position: absolute;
content:'';
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;}

#whole2{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image:url(https://i.imgur.com/upJIrz1.png);
background-repeat: no-repeat;
background-size: auto 100%;
background-position: top right;
background-color: black;
-webkit-transition: all 1s, opacity 1s .5s;
transition: all 1s, opacity 1s .5s;
z-index: 7;
opacity: 1;
}

#baseswitch{
opacity: 0;}

#base1:checked ~ #whole #selector{
box-shadow: 0px 0px 7px black;
-webkit-animation: boxpush 1s linear infinite;
animation: boxpush 1s linear infinite;
}

#base1:checked ~ #whole #whole2{
-webkit-transition: all 1s 1s, opacity 2s;
transition: all 1s 1s, opacity 2s;

z-index: 0;
opacity: 0;}

#base1:checked ~ #whole #totaltitle{
width: 201px;
text-align: center;
  right: 2%;
}

#base1:checked ~ #whole #musicplayer:before{
opacity: .8;}

#base1:checked ~ #whole #musicplayer{
right: 10px;
opacity: 1;
-webkit-transition: all 2s, opacity 2s .5s;
transition: all 2s, opacity 2s .5s;}

#songuu, #musicplayer, #musicplayer:before{
-webkit-transition: all 2s;
transition: all 2s;}

#base1:checked ~ #whole #songuu{
right: 50px;
opacity: 1;}

#base1:checked ~ #whole #songuu .songselect{
box-shadow: 0px 0px 3px black;}

#totaltitle{
-webkit-transition: all 2s;
transition: all 2s;
z-index: 7;
position: fixed;
text-align: center;}

@-webkit-keyframes boxpush{
0%{box-shadow: 0px 0px 0px;}
50%{box-shadow: 0px 0px 6px;}
100%{box-shadow: 0px 0px 0px;}
}

@keyframes boxpush{
0%{box-shadow: 0px 0px 0px;}
50%{box-shadow: 0px 0px 6px;}
100%{box-shadow: 0px 0px 0px;}
}


@-webkit-keyframes boxpush2{
0%{box-shadow: 0px 0px 0px #8c64e9;}
50%{box-shadow: 0px 0px 6px #8c64e9;}
100%{box-shadow: 0px 0px 0px #8c64e9;}
}

@keyframes boxpush2{
0%{box-shadow: 0px 0px 0px #8c64e9;}
50%{box-shadow: 0px 0px 6px #8c64e9;}
100%{box-shadow: 0px 0px 0px #8c64e9;}
}



#base1:checked ~ #whole .coverpage{
 box-shadow: 1px 1px 5px black;
-webkit-transition: all 2s, box-shadow 1s 1.5s;
transition: all 2s, box-shadow 1s 1.5s;
}

---- HTML -----


<input type="radio" name="songswitch" id="song1">
<input type="radio" name="songswitch" id="song2">
<input type="radio" name="songswitch" id="song3">
<input type="radio" name="songswitch" id="song4">
<input type="checkbox" name="baseswitch" id="base1">

<div id="whole">

<div id="whole2">
</div>


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

<label for="base1"><div id="selector" onclick="document.getElementById('TheMusic').play()">
</div></label>



 <a class="coverpage" href="#div1">
 </a>

 <div id="centerhost">

 <div class="glasspanes">
 <div id="contentss">
<div id="statfloat1">name</div>
<div id="statfloat2">N/A (none)</div>
<div id="statfloat1">alias</div>
<div id="statfloat2">DiGiTaL</div>
<div id="statfloat1">eyes</div>
<div id="statfloat2">blue (hexagonal)</div>
<div id="statfloat1">hair and fur</div>
<div id="statfloat2">blonde and blue</div>
<div id="statfloat1">height</div>
<div id="statfloat2">5'9"</div>
<div id="statfloat1">gender</div>
<div id="statfloat2">male</div>
<div id="statfloat1">age (physical approx)</div>
<div id="statfloat2">early 20's</div>
 </div>
 <a class="exitlink" href="#div2">
 </a>
 </div>

 <div class="glasspanes">
 <div id="contentss">
<b>On his origins...</b><br>
Digital is an intelligent consciousness capable of transferring between and interacting with various electrical devices. In his comparatively short acknowledged history, he has been witnessed moving along various forms of wireless signals and frequencies to occasionally occupy a variety of computers, including cell phones, gaming consoles and laptops. The source of his life energy and the composition of his actual presence is unknown.<br><br>

<b>On his personality...</b><br>
Lively and often extroverted, the way he behaved is mostly a facade. Digital's feelings are very easily hurt, as his primary goal is to be seen as 'normal but very cool', a goal that he often touts as having been achieved despite how much he internally struggles with the definition of these things. When his qualifications as a 'real person' are questioned, his response is usually to respond in some offhand and comedic way - rarely permitting any look at the pain such comments cause. However, all of this is turned into a hard drive towards accomplishing his goals... to become unquestionably 'real.'<br><br>

<b>On his body...</b><br>
In the past, Digital has created a visual body out of 'hard light', particles discovered within any light source that occupies physical space and can be manipulated to apply various forces, primarily kinetic. While not usually visible, this can be paired precisely with holographic technology to construct convincing structures that appear physical. After quite a bit of research into cutting-edge technologies and theoretical works in various fields, including breakthroughs in fields like cloning and nanotechnology-based fleshweaving, Digital created a physical homunculus body for himself that he currently occupies. Outwardly almost indistinguishable from any other person visibly, this form is a meshwork of all those learnings and contains his presence and personality through a network of nanites that circulate throughout it.<br><br>
<b>On his social life...</b><br>
Fortunate enough to have found a person willing (with some coercion) to let him occupy her computer and eventually her house, Jynx was not only a roommate but Digital's real tether to the social structure of the world and his way of making sense of most things. The two have since lost touch, though he's named his A.I. after her as a thanks and reminder for the help she'd provided him. Since taking on a real body, he's found that lots of things were quite a bit different from what he originally expected... and it helps him to have someone to rely on to make sense of it all.<br><br>
Focusing on the Digicade, a project that serves both for research and entertainment, he's fallen away a little from normal social interaction. This changed when he eventually came to meet <a target="_blank" href="http://roleplay.chat/profile.php?user=Tashyra" target=_blank>Tashyra</a> while hanging at the Redwood Lodge. The two had a fair amount in common and became fast friends, usually playing games or planning future DJing shows for Tash.<br><br>
Tashyra has come to mean far more to him than he'd ever casually admit.

<br><br>
<b>On recent events...</b><br>
Living in the Digicade.
 </div>
 <a class="exitlink" href="#div3">
 </a>
 </div>

 <div class="glasspanes">
 <div id="contentss">
Profile is mostly a WIP.<br>
Code is mine.<br>
Character and art are owned.<br>
Artist is <a target="_blank" href="http://furaffinity.net/user/mafyprime" target=_blank>mafyprime</a>.<br>
Music is <a target="_blank" href="https://youtu.be/So5J1CNa0GA" target=_blank>Infected Mushroom</a>.
 </div>
 <a class="exitlink" href="#div1">
 </a>
 </div>

 <div id="titlediv">
 <div id="lifter">Stats.</div>
 </div>

 <div id="titlediv">
 <div id="lifter">Details.</div>
 </div>

 <div id="titlediv">
 <div id="lifter">ooc.</div>
 </div>

 </div>

 <div id="musicplayer">
 <div id="audiocontain">

 <div class="audiocontain2" id="song11">
 <audio controls src="https://puu.sh/rDC2U/aac14d9e83.mp3">
 </audio>
</div>

<div class="audiocontain2" id="song22">
 <audio controls src="https://puu.sh/s1tyH/acf3871f68.mp3">
 </audio>
</div>

<div class="audiocontain2" id="song33">
 <audio controls src="https://puu.sh/s1tzo/b8c78179e8.mp3">
 </audio>
</div>

<div class="audiocontain2" id="song44">
 <audio controls src="https://puu.sh/s1tA1/7a28cc9e9d.mp3">
 </audio>
</div>

 </div>
 <div class="textcontain" id="song11">
 Infected Mushroom - See Me Now
 </div>

 <div class="textcontain" id="song22">
Tron Legacy:Re* - Son of Flynn
 </div>

 <div class="textcontain" id="song33">
M83 - Midnight City
 </div>

 <div class="textcontain" id="song44">
MEGADRIVE - NARC
 </div>
 </div>


 <div id="totaltitle">
 <u>D</u>i<u>G</u>i<u>TAL</u>
 </div>

<div id="songuu">
<label for="song1" class="songselect" id="songselect1"></label>

<label for="song2" class="songselect" id="songselect2"></label>

<label for="song3" class="songselect" id="songselect3"></label>

<label for="song4" class="songselect" id="songselect4"></label>

</div>

</div>

<audio src="http://k003.kiwi6.com/hotlink/cvum77ccd6/362241_lalazzylee1_game-wizard-sound-rpg-game.mp3" id="TheMusic">