Digital new profile 4/17/16

<style>

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


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: 100px;
  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">
              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 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">
              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 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">
              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 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>