Digital old profile 8/15/16

<style>

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

/* 9CADBF
A2A7B8 */

body {
 background: black;
 overflow: hidden;
 font-family: 'bodyfont';
}

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


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


#whole{
 position: fixed;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background-image:url(http://i.picpar.com/uINb.jpg);
 background-size: 300px;
 opacity: .6;
}

#digimage{
 position: absolute;
 top: 50px;
 left: 0px;
 right: 0px;
 margin: auto;
 height: 800px;
 width: 600px;
 border: 0px solid black;
 background-image:url(http://i64.tinypic.com/292bp0h.jpg);
background-repeat: no-repeat;
background-size: auto 800px;
background-position: center;
}

#container, #container2{
 position: absolute;
 top: 75px;
 left: 235px;
 height: 120px;
 width: 130px;
 border: 1px solid transparent;
transition: all 1s;
 -webkit-transition: all 1s;
 overflow: hidden;
 opacity: 0;
}

#whole:hover #container{
 opacity: .8;
}



#spinner{
 position: absolute;
 top: 0px;
 left: 0px;
 height: 100px;
 width: 100px;
border: 2px solid transparent;
 border-top: 2px solid white;
 border-radius: 360px 360px 360px 360px;
 -webkit-animation: spinningcircle 3s infinite linear;
transition: all 1s;
 -webkit-transition: all 1s;
}

#spinner2{
 position: absolute;
 top: 10px;
 left: 10px;
 height: 80px;
 width: 80px;
border: 2px solid transparent;
 border-left: 2px solid white;
 border-right: 2px solid white;
 border-radius: 90px 90px 90px 90px;
 -webkit-animation: spinningcircle 2s infinite linear;
transition: all 1s;
 -webkit-transition: all 1s;
}

#spinner3{
 position: absolute;
 top: 20px;
 left: 20px;
 height: 60px;
 width: 60px;
border: 2px solid transparent;
 border-left: 2px solid white;
 border-top: 2px solid white;
 border-bottom: 2px solid white;
 border-radius: 90px 90px 90px 90px;
 -webkit-animation: spinningcircle 1s infinite linear;
transition: all 1s;
 -webkit-transition: all 1s;
}

#nonspinner{
 position: absolute;
 top: 23px;
 left: 23px;
 height: 158px;
 width: 158px;
 border-radius: 360px 360px 360px 360px;
 background-image:url(http://i66.tinypic.com/ibcqac.jpg);
 background-position: center;
 background-size: auto 150%;
 overflow: hidden;
transition: all 1s;
 -webkit-transition: all .3s;
 opacity: 0;
}

@keyframes spinningcircle{
 0%{transform:rotate(0deg);}
 50%{transform:rotate(180deg);}
 100%{transform:rotate(360deg);}
}

@-webkitkeyframes spinningcircle{
 0%{transform:rotate(0deg);}
 50%{transform:rotate(180deg);}
 100%{transform:rotate(360deg);}
}

#container:target,
#secone:target #container,
#sectwo:target #container,
#secthree:target #container{
 overflow: visible;
 left: -200px;
 height: 200px;
 width: 200px;
 opacity: 1;
 -webkit-transition: all 2s linear, height 1s 2s, width 1s 2s;
 transition: all 2s linear, height 1s 2s, width 1s 2s;
}

#container:target #spinner,
#secone:target #container #spinner,
#sectwo:target #container #spinner,
#secthree:target #container #spinner{
 height: 200px;
 width: 200px;
 -webkit-animation: spinningcircle 4s infinite linear;
 transition: all 1s 2s;
 -webkit-transition: all 1s 2s;
}

#container:target #spinner2,
#secone:target #container #spinner2,
#sectwo:target #container #spinner2,
#secthree:target #container #spinner2{
 height: 180px;
 width: 180px;
 -webkit-animation: spinningcircle 3s infinite linear;
 transition: all 1s 2s;
 -webkit-transition: all 1s 2s;
}

#container:target #spinner3,
#secone:target #container #spinner3,
#sectwo:target #container #spinner3,
#secthree:target #container #spinner3{
 height: 160px;
 width: 160px;
 -webkit-animation: spinningcircle 2s infinite linear;
-webkit-transition: all 1s 2s;
}

#container:target #nonspinner,
#secone:target #container #nonspinner,
#sectwo:target #container #nonspinner,
#secthree:target #container #nonspinner{
 transition: all 1s 3s;
 -webkit-transition: all 1s 3s;
 opacity: 1;
}

#section1{
 top: -1px;
 left: -1px;
 border-radius: 90px 0px 00px 0px;
}

#section1 i{
 bottom: 20px;
 right: 20px;
}

#section2{
 top: -1px;
 right: -1px;
 border-radius: 0px 90px 0px 0px;
}
#section2 i{
 left: 20px;
 bottom: 20px;
}

#section3{
 bottom: -1px;
 left: -1px;
 border-radius: 0px 0px 0px 90px;
}
#section3 i{
 right: 20px;
 top: 10px;
}

#section4{
 bottom: -1px;
 right: -1px;
 border-radius: 0px 0px 90px 0px;
}
#section4 i{
 left: 20px;
 top: 10px;
}

.sections{
 position: absolute;
 background: #9EC0C2;
 opacity: 0;
 height: 80px;
 width: 80px;
 box-sizing: border-box;
 -webkit-transition: all 1s;
 transition: all 1s;
}

.sections i{
 position: absolute;
 text-align: center;
 color: white;
 text-shadow: 1px 1px 1px black;
 overflow: hidden;
 font-size: 30pt;
}

.sections:hover{
 opacity: .8;
}

.sections a{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
}

.secontainer{
 position: absolute;
 top: 300px;
 left: -770px;
 right: 0px;
 margin: auto;
 height: 130px;
 width: 170px;
 border: 0px solid black;
 overflow: hidden;
 -webkit-transition: all 1s;
 transition: all 1s;
 opacity: 0;
}

#sectopleft{
 position: absolute;
 top: 0px;
 left: 0px;
 border-top: 2px solid white;
 border-left: 2px solid white;
 height: 50px;
 width: 50px;
 border-radius: 30px 0px 0px 0px;
}
#sectopright{
 position: absolute;
 top: 0px;
 right: 0px;
 border-top: 2px solid white;
 border-right: 2px solid white;
 height: 50px;
 width: 50px;
 border-radius: 0px 30px 0px 0px;
}
#secbotleft{
 position: absolute;
 bottom: 0px;
 left: 0px;
 border-bottom: 2px solid white;
 border-left: 2px solid white;
 height: 50px;
 width: 50px;
 border-radius: 0px 0px 0px 30px;
}
#secbotright{
 position: absolute;
 bottom: 0px;
 right: 0px;
 border-bottom: 2px solid white;
 border-right: 2px solid white;
 height: 50px;
 width: 50px;
 border-radius: 00px 0px 30px 0px;
}

#secontent{
 position: absolute;
 top: 18px;
 left: 05px;
 right: 05px;
 bottom: 18px;
 text-align: center;
 box-sizing: border-box;
 padding-top: 5px;
 padding-left: 10px;
 padding-right: 10px;
 padding-bottom: 5px;
 font-size: 18pt;
 letter-spacing: -1px;
 color: white;
 text-shadow: 1px 1px 1px black;
 opacity: 0;
 -webkit-transition: all 1s;
 transition: all 1s;
 overflow: auto;
 z-index: 1;
}

#secone:target #onesec,
#sectwo:target #twosec,
#secthree:target #threesec{
 opacity: 1;
 width: 300px;
 height: 170px;
 -webkit-transition: all 1s .5s;
 transition: all 1s .5s;
}

#secone:target #onesec #secontent,
#sectwo:target #twosec #secontent,
#secthree:target #threesec #secontent{
 opacity: 1;
 -webkit-transition: all 1s 1s;
 transition: all 1s 1s;
 z-index: 2;
}

#backgroundfiller{
 background: #6EBEB6;
 opacity: 0;
 position: absolute;
 top: 2px;
 left: 2px;
 right: 2px;
 bottom: 2px;
 border-radius: 30px 30px 30px 30px;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#secone:target #onesec #backgroundfiller,
#sectwo:target #twosec #backgroundfiller,
#secthree:target #threesec #backgroundfiller{
 opacity: .3;
 -webkit-transition: all 1s 1s;
 transition: all 1s 1s;
}

#titlediv{
 position: absolute;
 font-size: 80pt;
 height: 120px;
 width: 400px;
 border: 0px solid black;
 top: 60px;
 left: 400px;
 color: white;
 font-style: italic;
}

#musiccontainer{
 position: absolute;
 bottom: 70px;
 right: 120px;
}

#backupmusic{
 position: absolute;
 left: 30px;
 top: 0px;
 height: 50px;
 width: 50px;
 border-radius: 10px 10px 10px 10px;
 transform:rotate(-45deg);
 -webkit-transform:rotate(-45deg);
 background-color: #71BBA4;
-webkit-animation: backupchanger 2s infinite;
animation: backupchanger 2s infinite;
}

#backupmusic audio{
 position: absolute;
 transform: rotate(45deg);
 -webkit-transform:rotate(45deg);
 top: 10px;
 left: 5px;
 width: 40px;
 opacity: 0;
}

#backupmusicbackground{
 transform:rotate(45deg);
 -webkit-transform:rotate(45deg);
 height: 40px;
 width: 40px;
 background-image:url(http://i67.tinypic.com/fp33g7.jpg);
 background-size: 100% auto;
 background-repeat: no-repeat;
 background-position: center;
 left: 5px;
 top: 5px;
 position: absolute;
}

.musicspinners{
 position: absolute;
 top: -13px;
 left: 13px;
 height: 80px;
 width: 80px;
 border-radius: 90px 90px 90px 90px;
 opacity: .7;
}

#spin1{border-top: 2px solid #28263B;
 -webkit-animation: spinningcircle 5s infinite linear;}
#spin2{border-right: 2px solid #28263B;
 -webkit-animation: spinningcircle 4s infinite linear;}
#spin3{border-left: 2px solid #28263B;
 -webkit-animation: spinningcircle 3s infinite linear;}

</style>

<div id="whole">
</div>
<div id="whole" style="background: transparent; opacity:1;">

 <div id="secone">
 <div id="sectwo">
 <div id="secthree">

 <div id="digimage">
 <div href="#container" id="container">
 <div id="spinner">
 </div>
 <div id="spinner2">
 </div>
 <div id="spinner3">
 </div>
 <div id="nonspinner">
 <a href="#secone" id="section1" class="sections">
 <i>1</i>

 </a>
 <a href="#sectwo" id="section2" class="sections">
 <i>2</i>
 </a>
 <a href="#secthree" id="section3" class="sections">
 <i>3</i>
 </a>
 <a href="#secfour" id="section4" class="sections" href="#blank">
 <i>4</i>
 </a>
 </div>
 </div>
 <a href="#container" id="container2">
 </a>


 <div class="secontainer" id="onesec">
 <div id="backgroundfiller">
 </div>
 <div id="sectopleft">
 </div>
 <div id="sectopright">
 </div>
 <div id="secbotleft">
 </div>
 <div id="secbotright">
 </div>
 <div id="secontent">
alias / DiGiTaL<br>
eyes / blue<br>
hair and fur / blonde and blue
height / 5'9"<br>
gender / male<br>
age (physical approx) / early 20's<br>
 </div>
 </div>

 <div class="secontainer" id="twosec">
 <div id="backgroundfiller">
 </div>
 <div id="sectopleft">
 </div>
 <div id="sectopright">
 </div>
 <div id="secbotleft">
 </div>
 <div id="secbotright">
 </div>
 <div id="secontent">
<b style="font-weight: 400; letter-spacing: 5px;">connections</b><br>
roommate / <a href="http://roleplay.chat/profile.php?user=Jynx" target="_blank" style="color: white;">Jynx</a><br>
gaming rival / <a href="http://roleplay.chat/profile.php?user=Phenster" target="_blank" style="color: white;">Phenster</a>
 </div>
 </div>


 <div class="secontainer" id="threesec">
 <div id="backgroundfiller">
 </div>
 <div id="sectopleft">
 </div>
 <div id="sectopright">
 </div>
 <div id="secbotleft">
 </div>
 <div id="secbotright">
 </div>
 <div id="secontent">
<b style="letter-spacing: 5px;"> Likes</b> <br>
<a href="https://www.youtube.com/user/MonstercatMedia" style="color: white;" target=_blank>Monstercat</a>.<br>
 Nice people<br>
Having a body<br>
Technology<br>
<br>
<b style="letter-spacing: 5px;"> Dislikes</b> <br>
 Assholes<br>
HUAR
 </div>
 </div>


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

<div id="musiccontainer">
 <div id="spin1" class="musicspinners">
 </div>
 <div id="spin2" class="musicspinners">
 </div>
 <div id="spin3" class="musicspinners">
 </div>
<div id="backupmusic">
 <div id="backupmusicbackground">
 </div>
<audio controls src="http://puu.sh/omicb/aaf2c9fda4.mp3" id="digisong">
</audio>
</div>
 </div>



 </div>