Chapter One profile.

<style>

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

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


#whole{
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image:url(http://puu.sh/shhrd/0a7c5713bc.jpg);
  background-repeat: no-repeat;
  background-size: 120% auto;
  background-position: bottom center;
  background-color: #0F1418;
  overflow: hidden;
}

#startbutton, #startbutton2{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 50%;
  bottom: 30%;
  margin: auto;
  width: 230px;
  height: 60px;
  text-align: center;
  font-family: 'bodyfont';
  font-size: 50pt;
  color: white;
  text-shadow: 1px 1px 10px white;
  box-shadow: 0px 0px 10px white;
  border-radius: 5px;
  -webkit-transition: all 0s 99999s;
  transition: all 0s 999999s;
  overflow: hidden;
}

#startbutton{
  opacity: 0;
  z-index: 1;
}

#startbutton2 i, #skipbutton i{
  float: left;
  width: 100%;
  margin-top: -8px;
  font-style: normal;
  letter-spacing: 10px;
}



#startdescription{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 50%;
  bottom: 0px;
  margin: auto;
  height: 100px;
  width: 230px;
  overflow: hidden;
  font-family:'bodyfont', Times, Arial;
  font-size: 16pt;
  color: white;
  text-align: left;
  box-sizing: border-box;
  padding: 10px;
  text-shadow: 0px 0px 10px white;
  -webkit-transition: all 0s 99999s;
  transition: all 0s 999999s;
}

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

#skipbutton{
    position: absolute;
  top: 30%;
  left: 0px;
  right: 50%;
  bottom: 0px;
  margin: auto;
  width: 230px;
  height: 60px;
  text-align: center;
  font-family: 'bodyfont';
  font-size: 50pt;
  color: white;
  text-shadow: 1px 1px 10px white;
  box-shadow: 0px 0px 10px white;
  border-radius: 5px;
  -webkit-transition: all 0s 99999s;
  transition: all 0s 999999s;
}

#startbutton:active ~ #startbutton2,
#startbutton:active ~ #startdescription,
#startbutton:active ~ #skipbutton{
  -webkit-transition: all 0s 0s;
  transition: all 0s 0s;
  opacity: 0;
}

#yeardiv{
  position: absolute;
  top: 10%;
  left: 10%;
  height: 25px;
  width: 170px;
  font-family:'bodyfont', Times, Arial;
  font-size: 18pt;
  text-align: left;
  color: white;
  border-bottom: 1px solid gray;
  -webkit-transition: all 1s 2s;
  transition: all 1s 2s;
  opacity: 1;
}

#citydiv{
  position: absolute;
  top: 20%;
  left: 10%;
  height: 25px;
  width: 260px;
  font-family:'bodyfont', Times, Arial;
  font-size: 18pt;
  text-align: left;
  color: white;
  border-bottom: 1px solid gray;
  -webkit-transition: all 1s 3.5s;
  transition: all 1s 3.5s;
  opacity: 1;
}

#barslide{
  position: absolute;
  top: 30%;
  bottom: 0px;
  left: 5%;
  margin: auto;
  height: 500px;
  width: 450px;
  border: 0px solid black;
  -webkit-transition: all 1s 5s;
  transition: all 1s 5s;
  opacity: 1;
}

#fuzzbar1{
  position: absolute;
  top: 20px;
  left: 10px;
  right: 10px;
  height: 10px;
  -webkit-filter:blur(4px);
  filter:blur(4px);
  background: white;
  z-index: 2;
}

#fuzzbar2{
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  height: 10px;
  -webkit-filter:blur(4px);
  filter:blur(4px);
  background: white;
  z-index: 2;
}

#infocontainer{
  position: absolute;
  top: 25px;
  left: 20px;
  right: 20px;
  bottom: 15px;
  border: 0px solid black;
  overflow: hidden;
}

#infoline1, #infoline2, #infoline3,
#infoline4, #infoline5, #infoline6{
  position: absolute;
  bottom: 470px;
  left: 10px;
  right: 10px;
  height: 60px;
  border: 0px solid black;
  color: white;
  font-family:'bodyfont2', Arial, Times;
  font-size: 13pt;
  word-spacing: 2px;
  letter-spacing: 2px;
  text-shadow: 0px 0px 7px #607d8b;
  text-align: left;
  -webkit-transition: all 20s linear 5s, opacity 1s;
  transition: all 20s 5s linear, opacity 1s;
  opacity: 1;
}

#infoline2{
  -webkit-transition: all 20s 15s linear, opacity 1s;
  transition: all 20s 15s linear, opacity 1s;
}
#infoline3{
    -webkit-transition: all 20s 25s linear, opacity 1s;
  transition: all 20s 25s linear, opacity 1s;
}
#infoline4{
    -webkit-transition: all 20s 35s linear, opacity 1s;
  transition: all 20s 35s linear, opacity 1s;
}
#infoline5{
    -webkit-transition: all 20s 45s linear, opacity 1s;
  transition: all 20s 45s linear, opacity 1s;
}
#infoline6{
    -webkit-transition: all 20s 52s linear, opacity 1s;
  transition: all 20s 52s linear, opacity 1s;
}

#startbutton:active ~ #div2 #infoline1,
#startbutton:active ~ #div2 #infoline2,
#startbutton:active ~ #div2 #infoline3,
#startbutton:active ~ #div2 #infoline4,
#startbutton:active ~ #div2 #infoline5,
#startbutton:active ~ #div2 #infoline6{
  bottom: -60px;
  opacity: 0;
  -webkit-transition: all 0s;
  transition: all 0s;
}

#introstack1, #introstack2, #introstack3{
  opacity: 0;
  -webkit-transition: all 1s 60s;
  transition: all 1s 60s;
}

#startbutton:active ~ #div2 #introstack1,
#startbutton:active ~ #div2 #introstack2,
#startbutton:active ~ #div2 #introstack3{
  opacity: 1;
  -webkit-transition: all 0s 0s;
  transition: all 0s 0s;
}

#startbutton:active ~ #div2 #yeardiv,
#startbutton:active ~ #div2 #citydiv{
  -webkit-transition: all 0s;
  transition: all 0s;
  opacity: 0;
  left: 12%;
}

#startbutton:active ~ #div2 #barslide{
  -webkit-transition: all 0s;
  transition: all 0s;
  opacity: 0;
}

#div2{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: -1;
  -webkit-transition: all 0s 999999s;
  transition: all 0s 999999s;
}

#startbutton:active ~ #div2{
  -webkit-transition: all 0s 0s;
  transition: 0s 0s;
  z-index: 0;
}

#div3{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: -1;
  -webkit-transition: all 0s 99999s, opacity 1s 99999s, left 0s .1s;
  transition: all 0s 999999s, opacity 1s 99999s, left 0s .1s;
  opacity: 0;
}

#startbutton:active ~ #introstack4 #div3{
  -webkit-transition: all 0s 0s;
  transition: all 0s 0s;
  z-index: 10;
  opacity: 1;
  left: 50%;
}



#titlepiece{
  position: absolute;
  top: 30%;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 900px;
  height: 100px;
  font-size: 80pt;
  font-weight: 800;
  color: white;
  text-shadow: 1px 1px 3px black;
  text-align: center;
  font-family:'bodyfont', Arial, Times;
  border-bottom: 3px dashed white;
  opacity: 1;
  -webkit-transition: all 1s 63s;
  transition: all 1s 63s;
}

#titlepiece2{
  position: absolute;
  top: 140px;
  left: 0px;
  right: 0px;
  height: 100px;
  width: 700px;
  margin: auto;
  font-size: 40pt;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 3px black;
  font-style: italic;
  font-family:'bodyfont2', Arial, Times;
  letter-spacing: 2px;
  opacity: 1;
  -webkit-transition: all 1s 63s;
  transition: all 63s;
}

#chapterpiece{
  position: absolute;
  left: -40px;
  top: -2px;
  height: 60px;
  width: 130px;
  border: 0px solid black;
  font-size: 15pt;
  text-shadow: 0px 0px 7px white;
  opacity: 1;
  -webkit-transition: all 1s 65s;
  transition: all 1s 65s;
}

#explanationpiece{
  position: absolute;
  top: 100px;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 500px;
  height: 100px;
  border: 0px solid black;
  color: white;
  text-shadow: 0px 0px 7px white;
  font-family:'bodyfont2', Arial, Times;
  font-size: 15pt;
  opacity: 1;
  -webkit-transition: all 1s 61s;
  transition: all 1s 61s;
  text-align: center;
  font-style: italic;
}

#startbutton:active ~ #introstack4 #div3 #titlepiece,
#startbutton:active ~ #introstack4 #div3 #titlepiece2,
#startbutton:active ~ #introstack4 #div3 #chapterpiece,
#startbutton:active ~ #introstack4 #div3 #explanationpiece,
#startbutton:active ~ #introstack4 #div3 #continuebutton{
  -webkit-transition: all 0s;
  transition: all 0s;
  opacity: 0;
}

#startbutton audio{
  position: absolute;
  zoom: 1000%;
  opacity: 1;
  top: -13px;
  left: -5px;
  z-index: 1;
}

#continuebutton{
  position: absolute;
  top: 50%;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  width: 230px;
  height: 60px;
  text-align: center;
  font-family: 'bodyfont';
  font-size: 45pt;
  color: white;
  text-shadow: 1px 1px 10px white;
  box-shadow: 0px 0px 10px white;
  border-radius: 5px;
  overflow: hidden;
  opacity: 0;
  text-decoration: none;
  -webkit-animation: blinkanim 2s 67s infinite linear;
  animation: blinkanim 2s 67s infinite linear;
}

@-webkit-keyframes blinkanim{
  0%{opacity: 0;}
  50%{opacity: 1;}
  100%{opacity:0;}
}

@keyframes blinkanim{
  0%{opacity: 0;}
  50%{opacity: 1;}
  100%{opacity:0;}
}

#div4{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: -1;
  opacity: 0;
}

#playerstack{
  position: absolute;
  top: 20%;
  left: 5%;
  height: 600px;
  width: 500px;
  border: 0px solid black;
  box-sizing: border-box;
  padding-top: 10px;
  padding-left: 10px;
}

#playerstack a{
  position: absolute;
  height: 100px;
  width: 300px;
  border: 1px solid black;
  color: white;
  text-shadow: 1px 1px 10px white;
  box-shadow: 0px 0px 10px white;
  border-radius: 5px;
  box-sizing: border-box;
  overflow: hidden;
  text-align: left;
  font-family:'bodyfont', times, Arial;
  font-size: 30pt;
  padding-top: 30px;
  padding-left: 120px;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: top left 40px;
  -webkit-transition: all 1s;
  transition: all 1s;
  text-decoration: none;
}

#playerstack a:hover{
  -webkit-transition: all 1s;
  transition: all 1s;
  margin-left: 50px;
}

#playerstack a:nth-child(1){
  background-image:url(http://i66.tinypic.com/35mfxpu.jpg);
}

#playerstack a:nth-child(2){
  margin-top: 115px;
  background-image:url(http://i66.tinypic.com/35mfxpu.jpg);
}

#playerstack a:nth-child(3){
  margin-top: 230px;
  background-image:url(http://i66.tinypic.com/35mfxpu.jpg);
}

#playerstack a:nth-child(4){
  margin-top: 345px;
}

#playerstack:before{
  content:'';
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: black;
}

#div1:target ~ #introstack1,
#div1:target ~ #introstack2,
#div1:target ~ #introstack3,
#div1:target ~ #startbutton,
#div1:target ~ #startbutton2,
#div1:target ~ #startdescription,
#div1:target ~ #skipbutton,
#div1:target ~ #introstack4{
  -webkit-transition: all 1s 1s, opacity 1s 0s !important;
  transition: all 1s 1s, opacity 1s 0s !important;
  opacity: 0 !important;
  z-index: -1 !important;
}

#div1:target ~ #div4{
  -webkit-transition: all 1s 1s;
  transition: all 1s 1s;
  opacity: 1;
  z-index: 20;
}

#div1button{
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 999999;
}

</style>

<div id="whole">

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

  <div id="startbutton">
    <audio controls src="https://puu.sh/sm2a6/ec50ccc3c6.mp3">
    </audio>
  </div>

  <div id="startbutton2">
    <i>START</i>
  </div>

  <a id="skipbutton" href="#div1">
    <i>SKIP</i>
  </a>

  <div id="startdescription">
    This profile's introduction is automatically accompanied by music. To skip this, please simply click below.
  </div>

  <div id="div2">

    <div id="introstack1">
      <div id="yeardiv">
        ― The Year Is 2099
      </div>
    </div>

    <div id="introstack2">
      <div id="citydiv">
        ― The City is US-O1, New York
      </div>
    </div>

    <div id="introstack3">
      <div id="barslide">
        <div id="fuzzbar1">
        </div>
        <div id="fuzzbar2">
        </div>
        <div id="infocontainer">
          <div id="infoline1">
            <i>Zephyr Corp</i> has revolutionized the world.</div>
          <div id="infoline2">
            Appearing suddenly and led by the mysterious figure <i>Mr. Antagon</i>, within three years <i>Zephyr Corp</i> leads the world in every field.
          </div>
          <div id="infoline3">
            Soon, almost every citizen has some variety of cybernetic modifications within their bodies as well as a small implant in their brains.
          </div>
          <div id="infoline4">
            It is now ten years later and <i>Zephyr Corp</i> is everywhere. They control everything. Some say they control every<i>one</i>.
          </div>
          <div id="infoline5">
            However, not all the changes resulting from this have been for the better. Crime has begun to run rampant as greed rules the streets...
          </div>
          <div id="infoline6">
            ... but in this chaos there are whispers. Whispers of a <i>secret</i>. A secret that could change the world.
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="introstack4">
  <div id="div3">
    <div id="titlepiece">
      The Digicade Chronicles
      <div id="titlepiece2">
        ╼ The Unwitting Architect ╾
        <div id="chapterpiece">
          Chapter<br> One
        </div>
      </div>
    </div>

    <div id="explanationpiece">
      This is the story of how the world fell and the tales of those who were there.
    </div>

    <a id="continuebutton" href="#div1">
      CONTINUE
    </a>
  </div>
  </div>

  <div id="div4">
    <div id="playerstack">
      <a>Player One</a>
      <a>Player Two</a>
      <a>Player Three</a>
    </div>
  </div>

</div>

<a id="div1button" href="#div1">
  Div1Link.
</a>