Digital new profile 8/15/16

<style>

body {
  overflow: hidden;
}

#whole{
  background: #291d30;
  background: #110e13;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: hidden;
  background-image:url(http://risetampa.org/wp-content/uploads/2015/03/pattern2.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

::-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: #4A83B8;
}


#digimage {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image: url(http://i64.tinypic.com/r1djf8.jpg);
  background-position: top right 10%;
  background-size: auto 100%;
  background-repeat: no-repeat;
}

#digimage2 {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image: url(http://i68.tinypic.com/33v1d6w.jpg);
  background-position: top right 10%;
  background-size: auto 100%;
  background-repeat: no-repeat;
  opacity: 0;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#startspace {
  position: absolute;
  top: 20%;
  left: 0px;
  right: 0px;
  margin: auto;
  height: 30px;
  width: 100px;
  z-index: 5;
}

#startbutton {
  position: absolute;
  top: 20%;
  left: 0px;
  right: 0px;
  margin: auto;
  border: 1px solid #6A869E;
  height: 30px;
  width: 100px;
  box-shadow: 2px 2px 8px #6A869E;
  -webkit-transition: all 0s, top 1s, opacity 1s;
  transition: all 0s, top 1s, opacity 1s;
}

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

#startbutton h1 {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  text-align: center;
  z-index: 1;
  font-size: 40pt;
  margin-top: -13px;
  font-family: 'bodyfont', 'Times';
  color: black;
}

#startbutton:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: #6A869E;
  opacity: .8;
}

#startbutton:before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  z-index: 2;
}

#digicheck {
  opacity: 0;
}

#digicheck:active ~ #startbutton {
  box-shadow: 2px 2px 1px #6A869E;
}

#digicheck:checked ~ #startbutton {
  -webkit-transition: top 1s, opacity 1s;
  transition: top 1s, opacity 1s;
  opacity: 0;
  top: 100px;
}

#containall {
  z-index: 0;
}

#digicheck:checked ~ #containall {
  z-index: 6;
}

#digicheck:checked ~ #containall #digimage2 {
  -webkit-transition: all 1s .5s ease-in-out;
  transition: all 1s .5s ease-in-out;
  opacity: 1;
}

#spincontainer {
  position: absolute;
  top: -30%;
  left: -40%;
  right: 0px;
  bottom: 0px;
  margin: auto;
  height: 250px;
  width: 250px;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
}

#digicheck:checked ~ #containall #spincontainer{
  -webkit-transition: all 2s 1.5s;
  transition: all 2s 1.5s;
  opacity: 1;
}

#spinningblue {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  height: 200px;
  width: 200px;
  border-radius: 360px 360px 360px 360px;
  border: 0px solid white;
  -webkit-animation: spinningcircles 8s infinite linear;
  animation: spinningcircles 8s infinite linear;
}

#spinningblue:after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 5px solid #68869C;
  border-color: #68869C transparent transparent transparent;
  border-radius: 50%/100px 100px 0px 0px;
}

#spinningblue:before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 5px solid #68869C;
  border-color: transparent transparent #68869C transparent;
  border-radius: 0px 100px 50%/100px 100px;
}

#spinningblue2,
#spinningblue3 {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  height: 200px;
  width: 200px;
  border-radius: 360px 360px 360px 360px;
  border: 0px solid white;
}

#spinningblue2 {
  -webkit-animation: spinningcircles 6s infinite linear;
  animation: spinningcircles 6s infinite linear;
}

#spinningblue3 {
  -webkit-animation: spinningcircles 4s infinite linear;
  animation: spinningcircles 4s infinite linear;
}

#spinningblue2:after,
#spinningblue3:after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 5px solid #68869C;
  border-color: #68869C transparent transparent transparent;
  border-radius: 50%/100px 100px 0px 0px;
}

#spinningblue2:before,
#spinningblue3:before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 5px solid #68869C;
  border-color: transparent transparent #68869C transparent;
  border-radius: 0px 100px 50%/100px 100px;
}

#spinningblue2 {
  zoom: 90%;
}

#spinningblue3 {
  zoom: 80%;
}

#spinningblue2:after {
  border-color: #325760 transparent transparent transparent;
}

#spinningblue2:before {
  border-color: transparent transparent #325760 transparent;
}

#spinningblue3:before {
  border-color: transparent transparent #325760 transparent;
}

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

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

#thepulse{
  color: white;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 140px;
  width: 140px;
  margin: auto;
  background: transparent;
  border: 0px solid black;
  border-radius: 360px 360px 360px 360px;
  -webkit-animation: pulsering 3s .9s linear infinite;
  animation: pulsering 3s .9s linear infinite;
}

#thepulse:nth-child(4){
  zoom:93%;
  -webkit-animation: pulsering 3s .7s linear infinite;
  animation: pulsering 3s .7s linear infinite;
}

#thepulse:nth-child(5){
  zoom:85%;
  -webkit-animation: pulsering 3s .5s linear infinite;
  animation: pulsering 3s .5s linear infinite;
}

#thepulse:nth-child(6){
  zoom:75%;
  -webkit-animation: pulsering 3s .3s linear infinite;
  animation: pulsering 3s .3s linear infinite;
}

@-webkit-keyframes pulsering {
  0% {
    box-shadow: 0px 0px 0px 0px #3281cc;
  }
  50% {
    box-shadow: 0px 0px 10px 1px #3281cc;
  }
  100% {
    box-shadow: 0px 0px 0px 0px #3281cc;
  }
}

@keyframes pulsering {
  0% {
    box-shadow: 0px 0px 0px 0px #3281cc;
  }
  50% {
    box-shadow: 0px 0px 10px 1px #3281cc;
  }
  100% {
    box-shadow: 0px 0px 0px 0px #3281cc;
  }
}

#pulsecircle{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  height: 100px;
  width: 100px;
  border-radius: 360px;
  -webkit-animation: pulsesphere 1s linar infinite;
  animation: pulsesphere 1s linear infinite;
  -webkit-filter:blur(10px);
  filter:blue(10px);
}

@-webkit-keyframes pulsesphere{
  0%{background: #3281cc;}
  50%{background:#6A869E;}
  100%{background:#3281cc;}
}

@keyframes pulsesphere{
  0%{background: #3281cc;}
50%{background:#6A869E;}
  100%{background:#3281cc;}
}

#contentcircle{
 position: absolute;
  top: -105px;
  left: -105px;
  right: -95px;
  bottom: -95px;
  border: 0px solid white;
  border-radius: 360px;
}

.firstdiv{
  position: absolute;
  top: 20px;
  left: 0px;
  right: 0px;
  margin: auto;
  height: 30px;
  width: 30px;
  -webkit-transition: all 2s;
  transition: all 2s;
}

.seconddiv{
  position: absolute;
  top: 0px;
  right: 20px;
  bottom: 0px;
  margin: auto;
  height: 30px;
  width: 30px;
  -webkit-transition: all 2s;
  transition: all 2s;
}

.thirddiv{
    position: absolute;
  bottom: 20px;
  left: 0px;
  right: 0px;
  margin: auto;
  height: 30px;
  width: 30px;
}

.fourthdiv{
    position: absolute;
  top: 0px;
  bottom: 0px;
  left: 20px;
  margin: auto;
  height: 30px;
  width: 30px;
  -webkit-transition: all 2s;
  transition: all 2s;
}

.firstdiv:before,
.seconddiv:before,
.thirddiv:before,
.fourthdiv:before{
  content:'';
  position: absolute;
  top: 0px;
  left: 0px;
  height: 30px;
  width: 30px;
  border-radius: 360px;
  -webkit-animation: pulsesphere 3s linear infinite;
  height: 40px;
  width: 40px;
  -webkit-filter:blur(2px);
  -webkit-transition: all 1s;
  transition: all 1s;
}

.firstdiv:after,
.seconddiv:after,
.thirddiv:after,
.fourthdiv:after{
  content:'';
  position: absolute;
  margin-top: 50px;
  margin-left: -20px;
  height: 30px;
  width: 80px;
  box-shadow: 0px 0px 3px 2px gray;
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
  color: white;
  text-align: center;
  box-sizing: border-box;
  font-family:'bodyfont';
  font-size: 20pt;
}

.firstdiv:after{
  content:'info';
}

.seconddiv:after{
  content:'ooc';
}

.thirddiv:after{
  content:'reset';
}

.fourthdiv:after{
  content:'details';
}

.firstdiv:hover:after,
.seconddiv:hover:after,
.thirddiv:hover:after,
.fourthdiv:hover:after{
  opacity: 1;
}

#selection1:target .firstdiv{
  top: 210px;
}

#selection2:target .seconddiv{
  right: 210px;
}

#selection4:target .fourthdiv{
  left: 210px;
}

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

#selection1:target #effects,
#selection2:target #effects,
#selection4:target #effects{
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: .1;
}

#selection1:target .firstdiv:after,
#selection2:target .seconddiv:after,
#selection4:target .fourthdiv:after{
  -webkit-transition: all 1s .8s, opacity .8s 2.3s;
  transition: all 1s .8s, opacity .8s 2.3;
  margin-top: 0px;
  opacity: 1;
  color: black;
  opacity: 0;
}

#selection1:target .firstdiv:before,
#selection2:target .seconddiv:before,
#selection4:target .fourthdiv:before{
  -webkit-transition: all 1s 1s, height 1s 1.2s, width 1s 1.2s, margin 1s 1.2s, opacity .8s 2.3s;
  transition: all 1s .6s, height 1s 1.2s, width 1s 1.2s, margin 1s 1.2s, opacity .8s 2.3s;
  height: 30px;
  width: 80px;
  border-radius: 0px;
  margin-left: -20px;
  margin-top: 0px;
  opacity: 0;
}

#contents{
  position: absolute;
  margin-top: 0px;
  margin-left: 0px;
  height: 1px;
  width: 1px;
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
  overflow: hidden;
}

#contents h1{
  position: absolute;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
    box-sizing: border-box;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  font-family:'bodyfont', 'Times';
  font-size: 15pt;
  text-align: justify;
  text-justify: inter-word;
  color: black;
  overflow: auto;
}

#contents:before{
  content:'';
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  opacity: 0;
  background: #86A4C1;
  opacity: .5;
  -webkit-filter:blur(3px);
  z-index: -1;
}

#selection1:target .firstdiv #contents,
#selection2:target .seconddiv #contents,
#selection4:target .fourthdiv #contents{
  -webkit-transition: margin 2s 1.5s, height 2s 1.5s, width 2s 1.5s, opacity 1s 1s;
    transition: margin 2s 1.5s, height 2s 1.5s, width 2s 1.5s, opacity 2s 2.5s;
  opacity: 1;
  margin-top: -105px;
  margin-left: -105px;
  width: 250px;
  height: 250px;
  z-index: 1;
}

/* MUSIC SECTION */

#musicslice{
position: fixed;
top: 20px;
right: 20px;
height: 50px;
width: 50px;
border: 2px solid black;
overflow: hidden;
-webkit-transition: all 1s;
transition: all 0s;
box-shadow: 1px 1px 3px 1px #A1AFC5;
background: #A1AFC5;}

#musicslice:active{
-webkit-transition: all 0s;
transition: all 0s;
box-shadow: 1px 1px 0px 0px #A1AFC5;}

#musiccover{
position: absolute;
left: 0px;
top: 0px;
height: 50px;
width: 50px;
background-image:url(http://i67.tinypic.com/nq1llc.jpg);
background-size: auto 90%;
background-repeat: no-repeat;
background-position: center;
}

#musichidden{
position: absolute;
left: -10px;
top: 0px;
height: 50px;
width: 50px;
zoom: 180%;
opacity: 0;
z-index: 1;
overflow: hidden;}


/* MUSIC SECTION -- END */

</style>

<div id="whole">

<div id="selection1">
  <div id="selection2">
    <div id="selection4">

<input type="checkbox" for="digicheck" id="digicheck">
<label for="digicheck">
<div id="startspace">
</div>
</label>

<div id="startbutton">
  <h1>START</h1>
</div>

<div id="containall">

  <div id="digimage">
  </div>
  <div id="digimage2">
  </div>

  <div id="spincontainer">
    <div id="effects">
    <div id="spinningblue">
    </div>
    <div id="spinningblue2">
    </div>
    <div id="spinningblue3">
    </div>
    <div id="thepulse">
    </div>
    <div id="thepulse">
    </div>
    <div id="thepulse">
    </div>
    <div id="thepulse">
    </div>
    <div id="pulsecircle">
    </div>
    </div>

    <div id="contentcircle">
      <a class="firstdiv" href="#selection1">
        <div id="contents">
          <h1>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
          </h1>
        </div>
      </a>
      <a class="seconddiv" href="#selection2">
        <div id="contents">
          <h1>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
          </h1>
        </div>
      </a>
      <a class="thirddiv" href="#none">
      </a>
      <a class="fourthdiv" href="#selection4">
        <div id="contents">
          <h1>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
          </h1>
        </div>
      </a>
    </div>

  </div>

  <div id="musicslice" title="ratatat - loud pipes">
<div id="musiccover">
</div>
<div id="musichidden">
<audio controls src="http://puu.sh/qk1xV/ebe5e7f72c.mp3"></audio>
</div>
</div>

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