Chapter One update.

<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';
}

::-webkit-scrollbar {
 width: 3px;
 background-color: white;
}


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



#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: -108px;
    top: 18px;
  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: -5;
  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.linkers{
  position: absolute;
  height: 100px;
  width: 300px;
  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: 110px 115px;
  background-repeat: no-repeat;
  background-position: bottom left;
  -webkit-transition: all 1s;
  transition: all 1s;
  text-decoration: none;
  border: 1px solid white;
}

#playerstack a.linkers:hover{
  -webkit-transition: all 1s;
  transition: all 1s;
  margin-left: 50px;
  box-shadow: 0px 0px 0px 0px;
  border: 1px solid white;
  border-right: 0px;
  border-radius: 5px 0px 0px 5px;
}

#playerstack a.linkers:before{
  content:'';
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: -1;
  -webkit-transition: all 1s .5s;
  transition: all 1s .5s;
}

#playerstack a.linkers:nth-child(1){
  background-image:url(https://puu.sh/smP3z/8c956995e5.png);
}

#playerstack a.linkers:nth-child(2){
  margin-top: 115px;
  background-image:url(https://puu.sh/snas4/769b6d2af3.jpg);
}

#playerstack a.linkers:nth-child(3){
  margin-top: 230px;
 background-image:url(https://puu.sh/smPkM/11feffd38f.png);
}

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

#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,
#div11:target ~ #introstack1,
#div11:target ~ #introstack2,
#div11:target ~ #introstack3,
#div11:target ~ #startbutton,
#div11:target ~ #startbutton2,
#div11:target ~ #startdescription,
#div11:target ~ #skipbutton,
#div11:target ~ #introstack4,
#div12:target ~ #introstack1,
#div12:target ~ #introstack2,
#div12:target ~ #introstack3,
#div12:target ~ #startbutton,
#div12:target ~ #startbutton2,
#div12:target ~ #startdescription,
#div12:target ~ #skipbutton,
#div12:target ~ #introstack4,
#div13:target ~ #introstack1,
#div13:target ~ #introstack2,
#div13:target ~ #introstack3,
#div13:target ~ #startbutton,
#div13:target ~ #startbutton2,
#div13:target ~ #startdescription,
#div13:target ~ #skipbutton,
#div13:target ~ #introstack4,
#div14:target ~ #introstack1,
#div14:target ~ #introstack2,
#div14:target ~ #introstack3,
#div14:target ~ #startbutton,
#div14:target ~ #startbutton2,
#div14:target ~ #startdescription,
#div14:target ~ #skipbutton,
#div14: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,
#div11:target ~ #div4,
#div12:target ~ #div4,
#div13:target ~ #div4,
#div14:target ~ #div4{
  -webkit-transition: all 1s 1s;
  transition: all 1s 1s;
  opacity: 1;
  z-index: 20;
}

#infobox{
  position: absolute;
  top: 10px;
  left: 360px;
  height: 443px;
  width: 300px;
  border: .5px solid white;
  box-shadow: 2px 1px 4px #607D8B;
  overflow: hidden;
}

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

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

.setcontent{
  position: absolute;
  box-sizing: border-box;
  border-top: 2px white dotted;
  border-bottom: 2px white dotted;
  padding: 10px;
  padding-top: 40px;
  left: 0px;
  right: 0px;
  margin: auto;
  height: 200px;
  width: 250px;
  bottom: 10px;
  font-family:'bodyfont2', Arial, Times;
  font-size: 13pt;
  letter-spacing: 2px;
  text-align: justify;
  text-shadow: 1px 1px 1px black;
  overflow: auto;
  overflow-x: hidden;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
  z-index: 0;
  color: white;
  text-shadow: 1px 1px 1px black;
}

.setcontent a{
  position: absolute;
  top: 0px;
  left: 0px;
  text-align: left;
  font-style: italic;
  text-decoration: underline;
  color: white;
  margin-left: 10px;
  margin-top: 8px;
  height: 40px !important;
  background: transparent !important;
    font-size: 17pt !important;
  padding: 0px !important;
  text-align: left !important;
  box-shadow: 0px 0px 0px 0px !important;
  border: 0px !important;
  text-decoration: underline !important;
  text-shadow: 0px 0px 0px !important;
}

#basicset a:hover{
  left: 0px !important;
  margin-left: 10px !important;
}

#basicset .setcontent{
  color: black;
  border-color: black;
  text-shadow: 0px 0px 1px black;
  opacity: 1;
  z-index: 1;
  -webkit-transition: all 1s .5s;
  transition: all 1s .5s;
}

#basicset .setcontent a{
  color: black;
}

#infobox img{
  position: absolute;
  top: 10px;
  left: 0px;
  right: 0px;
  margin: auto;
  height: 210px;
  width: 240px;
  box-shadow: 0px 0px 3px white;
  opacity: 0;
  z-index: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
}

#basicset img{
  box-shadow: 0px 0px 3px black;
  opacity: 1;
  z-index 1;
  -webkit-transition: all 1s .5s;
  transition: all 1s .5s;
}

#div11:target ~ #div4 #basicset .setcontent,
#div11:target ~ #div4 #basicset img,
#div12:target ~ #div4 #basicset .setcontent,
#div12:target ~ #div4 #basicset img,
#div13:target ~ #div4 #basicset .setcontent,
#div13:target ~ #div4 #basicset img,
#div14:target ~ #div4 #basicset .setcontent,
#div14:target ~ #div4 #basicset img{
  z-index: 0;
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
}

#div11:target ~ #div4 #div111,
#div12:target ~ #div4 #div121,
#div13:target ~ #div4 #div131,
#div14:target ~ #div4 #div141{
  -webkit-transition: all 1s .7s;
  transition: all 1s .7s;
  z-index: 1;
  opacity: 1;
}

#div11:target ~ #div4 #playerstack a.linkers:nth-child(1),
#div12:target ~ #div4 #playerstack a.linkers:nth-child(2),
#div13:target ~ #div4 #playerstack a.linkers:nth-child(3),
#div14:target ~ #div4 #playerstack a.linkers:nth-child(4){
  margin-left: 51px;
  border-right: 0px;
  box-shadow: 0px 0px 0px;
  border-radius: 5px 0px 0px 5px;
  -webkit-transition: all 1s;
  transition: all 1s;
}

#div11:target ~ #div4 #playerstack a.linkers:nth-child(1):before,
#div12:target ~ #div4 #playerstack a.linkers:nth-child(2):before,
#div13:target ~ #div4 #playerstack a.linkers:nth-child(3):before,
#div14:target ~ #div4 #playerstack a.linkers:nth-child(4):before{
  -webkit-transition: all 1s .5s;
  transition: all 1s .5s;
  background: #607D8B;
  opacity: .2;
}

#div11:target ~ #div4 #infobox:before,
#div12:target ~ #div4 #infobox:before,
#div13:target ~ #div4 #infobox:before,
#div14:target ~ #div4 #infobox:before{
  -webkit-transition: all 1s .5s;
  transition: all 1s .5s;
  background: #607D8B;
  opacity: .2;
}

#div11:target ~ #div4 #infobox,
#div12:target ~ #div4 #infobox,
#div13:target ~ #div4 #infobox,
#div14:target ~ #div4 #infobox{
  -webkit-transition: all 1s;
  transition: all 1s;
  border-left: 1px solid transparent;
}

#informationstation{
  position: absolute;
  left: 60%;
  top: 0px;
  bottom: 0px;
  margin: auto;
  height: 650px;
  width: 400px;
}

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

.categorysection{
  position: absolute;
  left: 0px;
  right: 0px;
  height: 40px;
  text-align: center;
  box-shadow: 0px 0px 3px #607D8B;
  font-family: 'bodyfont', Arial, Times;
  font-size: 25pt;
  color: #607D8B;
  text-shadow: 0px 0px 7px #607D8B;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.categorysection:hover{
  cursor: url;
}

.categorysection:before{
  position: absolute;
  content:'';
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: black;
  z-index: -1;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: .5;
}

.categorysection#intro{
  top: 0px;
}

.categorysection#timeline{
  top: 45px;
}

.categorysection#locations{
  top: 90px;
}

.categorysection#definitions{
  top: 135px;
}

.categorysection#ooc{
  top: 180px;
}

#switch1, #switch2, #switch3, #switch4, #switch5{
  opacity: 0;
}

#switch1:checked ~ #informationstation .categorysection,
#switch2:checked ~ #informationstation .categorysection,
#switch3:checked ~ #informationstation .categorysection,
#switch4:checked ~ #informationstation .categorysection{
  margin-top: 430px;
}

#switch5:checked ~ #informationstation .categorysection{
  margin-top: 475px;
}

#switch2:checked ~ #informationstation #intro,
#switch3:checked ~ #informationstation #intro,
#switch3:checked ~ #informationstation #timeline,
#switch4:checked ~ #informationstation #intro,
#switch4:checked ~ #informationstation #timeline,
#switch4:checked ~ #informationstation #locations{
  margin-top: 475px;
}

#switch1:checked ~ #informationstation #intro,
#switch2:checked ~ #informationstation #timeline,
#switch3:checked ~ #informationstation #locations,
#switch4:checked ~ #informationstation #definitions,
#switch5:checked ~ #informationstation #ooc{
  top: 0px;
  height: 40px;
  margin-top: 0px;
  color: white;
  text-shadow: 0px 0px 7px white;
}

#switch1:checked ~ #informationstation #intro:before,
#switch2:checked ~ #informationstation #timeline:before,
#switch3:checked ~ #informationstation #locations:before,
#switch4:checked ~ #informationstation #definitions:before,
#switch5:checked ~ #informationstation #ooc:before{
  background-color: #607D8B;
}

.catinfo{
  position: absolute;
  top: 42px;
  left: 0px;
  right: 0px;
  height: 430px;
  z-index: -1;
  text-align: left;
  -webkit-transition: all .7s;
  transition: all .7s;
  opacity: 0;
  font-family:'bodyfont2', Arial, Times;
  font-size: 13pt;
  text-shadow: 1px 1px 1px black;
  color: white;
  box-sizing: border-box;
  letter-spacing: 2px;
  padding: 10px;
  overflow: hidden;
}

.catinfo:before{
  content:'';
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  opacity: 0.2;
  z-index: -5;
  background-color: #607D8B;
}

#catinside{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: auto;
  z-index: 1;
  text-align: left;
 font-family:'bodyfont2', Arial, Times;
  font-size: 13pt;
  text-shadow: 1px 1px 1px black;
  color: white;
  box-sizing: border-box;
  letter-spacing: 2px;
  padding: 10px;
}

.catinfo ul{
margin-left: -20px;}

#switch1:checked ~ #informationstation #cat1,
#switch2:checked ~ #informationstation #cat2,
#switch3:checked ~ #informationstation #cat3,
#switch4:checked ~ #informationstation #cat4,
#switch5:checked ~ #informationstation #cat5{
  -webkit-transition: all 1s 1s;
  transition: all 1s 1s;
  opacity: 1;
  z-index: 1;
}

.catinfo a{
  color: white;
}

#switch7{
opacity: 0;
}

#switch7:checked ~ #startbutton{
  z-index: 41 !important;
  opacity: 1 !important;
  -webkit-transition: all 0s 0s !important;
  transition: all 0s 0s !important;
  top: 0px !important;
  left: 0px !important;
  right: 95% !important;
  bottom: 90% !important;
  height: 30px !important;
  width: 30px !important;
}

#switchholder{
    position: fixed;
  z-index: 30;
  top: 0px !important;
  left: 0px !important;
  right: 95% !important;
  bottom: 90% !important;
  height: 30px !important;
  width: 30px !important;
  margin: auto;
  height: 30px;
  width: 30px;
  background: transparent;
  box-shadow: 0px 0px 4px white;
  border-radius: 5px 5px 5px 5px;
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
}


#switchkey{
  float: left;
  height: 30px;
  width: 30px;
  background: transparent;
  font-family:'bodyfont', Arial, Times;
  font-size: 21pt;
  text-align: center;
  color: white;
  text-shadow: 0px 0px 7px white;
}

#switch7:checked ~ .musiccontrol{
  opacity: 0 !important;
  -webkit-transition: all 0s 0s;
  transition: all 0s 0s;
}

#switch7:checked ~ #switchholder{
  display: none;
}

#switch7:checked ~ #startbutton audio{
    zoom: 161%;
    opacity: 1;
    top: -6px;
    left: -7px;
}

#div1:target ~ #switchholder,
#div11:target ~ #switchholder,
#div12:target ~ #switchholder,
#div13:target ~ #switchholder,
#div14:target ~ #switchholder{
  opacity: 1;
}

#locations h1{
  text-decorations: underline;
}

.catinfo a{
  text-decoration: none;
  border-bottom: 2px dotted white;
}

.catinfo ul{
  margin-bottom: 15px;
  margin-right: 5px;
}

.catinfo ul:nth-child(1){
  margin-top: 0px;
}


.catinfo li{
  margin-top: 2px;
}

#defin1, #defin2{
  opacity: 0;
}

#catinside label{
  float: left;
  margin-top: 3px;
}

#defin1:checked ~ #catinside #defin11,
#defin2:checked ~ #catinside #defin12{
  height: 100px;
  width: 300px;
  padding: 5px;
  overflow: auto;
  border-bottom: 3px solid black;
  border-left: 3px solid black;
  -webkit-transition: all 1s, width .1s;
  transition: all 1s, width .1s;
}

.fillout{
  float: left;
  margin-left: 10px;
  overflow: hidden;
  height: 0px;
  width: 0px;
  border-left: 0px solid black;
  border-bottom: 0px solid black;
  font-size: 11pt;
  text-align: justify;
  text-shadow: 0px 0px 10px white;
  box-sizing: border-box;
  border-bottom: 0px dashed white;
  padding: 0px;
  -webkit-transition: all 1s, width .1s .7s;
  transition: all 1s, width .1 .7s;
}

</style>

<div id="whole">

  <input type="checkbox" name="switchup" id="switch7">

  <div id="div1"></div>
  <div id="div11"></div>
  <div id="div12"></div>
  <div id="div13"></div>
  <div id="div14"></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" class="musiccontrol">

    <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" class="musiccontrol">
    <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 href="#div11" class="linkers">Player One</a>
      <a href="#div12" class="linkers">Player Two</a>
      <a href="#div13" class="linkers">Player Three</a>
      <a href="#div14" class="linkers">Player Four</a>

      <div id="infobox">
        <div id="basicset">
          <img src="https://puu.sh/sntmD/88c70722c9.png" />
          <div class="setcontent">
            <a href="" target=_blank>DEMO</a> This area will contain some basic information on all characters featured as part of this story.<br><br> 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="setcontent" id="div111">
          <a href="http://roleplay.chat/profile.php?user=Digital" target=_blank>Digital.</a> A young-looking man who is in fact not an organic creature at all, Digital is an entity that falls into the realm of super-science. Able to transfer between and
          inhabit various electronics, he is a consciousness only too well aware of the differences between himself and others. For some time now, he has occupied a homunculus body composed of various techniques and technologies that even now are unavailable
          on the world market.
        </div>
        <img id="div111" src="https://puu.sh/smPbp/c5f8ff3575.png" />

        <div class="setcontent" id="div121">
          <a href="http://roleplay.chat/profile.php?user=Mikah" target=_blank>Mikah.</a> You can have all the smarts in the world and all the experience with fixing everything in creation, but if you can't find the materials or source the tools then you
          aren't any better than a kid with toy blocks. This is of course where Mikah comes in; with eyes skilled at detecting valuable parts at a glance and a long history of finding things and people when they needed finding, he's an indispensable part
          of this team that's slowly coming together.
        </div>
        <img id="div121" src="https://puu.sh/snaC1/006dec8057.jpg" />

        <div class="setcontent" id="div131">
          <a href="http://roleplay.chat/profile.php?user=Zora" target=_blank>Zora.</a> Zora, short for Zoroaster and sometimes known as Ziggy, is Digital's mechanic. Often she fills him in on various things that he can't just find in an online manual,
          but primarily serves as a way to keep Digi from doing anything remarkably stupid. An older woman and experienced rider, Zora past as a motorcycle drag racer prepared her for the pace at which events will soon be moving.
        </div>
        <img id="div131" src="https://puu.sh/smQIT/204f00700f.png" />

        <div class="setcontent" id="div141">
          <a href="" target=_blank>Demo 4.</a> This area will contain some basic information on all characters featured as part of this story.<br><br> 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>
        <img id="div141" src="http://i66.tinypic.com/35mfxpu.jpg" />

      </div>
    </div>

    <input type="radio" name="catswitch" id="switch1">
    <input type="radio" name="catswitch" id="switch2">
    <input type="radio" name="catswitch" id="switch3">
    <input type="radio" name="catswitch" id="switch4">
    <input type="radio" name="catswitch" id="switch5">

    <div id="informationstation">


      <label for="switch1"><div class="categorysection" id="intro">
        Introduction
        </div></label>
      <label for="switch2"><div class="categorysection" id="timeline">
        Timeline
        </div></label>
      <label for="switch3"><div class="categorysection" id="locations">
        Locations
        </div>      </label>
      <label for="switch4"><div class="categorysection" id="definitions">
        Definitions
        </div>      </label>
      <label for="switch5"><div class="categorysection" id="ooc">
        Ooc
        </div>            </label>
      <div class="catinfo" id="cat1">
        <i>Zephyr Corp</i> has revolutionized the world. 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. Soon, almost every citizen has some variety of cybernetic
        modifications within their bodies as well as a small implant in their brains.
        <br><br> It is now ten years later and <i>Zephyr Corp</i> is everywhere. They control everything. Some say they control every<i>one</i>. However, not all the changes resulting from this have been for the better. Crime has begun to run rampant
        as greed rules the streets... but in this chaos there are whispers. Whispers of a <i>secret</i>. A secret that could change the world.
      </div>
      <div class="catinfo" id="cat2">
        <div id="catinside">
          <ul>
            <li>September 2, 2015
              <ul>
                <li>In an apartment in <i>Driftwood Valley</i>, a girl named <a href="http://roleplay.chat/profile.php?user=Jynx" target=_blank>Jynx</a> finds herself surprised when her phone behaves abnormally. A few days later, it will turn out that this
                  is <a href="#div11">Digital</a>'s first contact with another human.</li>
              </ul>
            </li>

            <li>December 10, 2015
              <ul>
                <li>An abandoned warehouse in the slums of <i>Driftwood Valley</i> is purchased in <a href="http://roleplay.chat/profile.php?user=Jynx" target=_blank>Jynx</a>'s name. This building will later be known as <i>The Digicade.</i> Soon after this,
                  <a href="#div11">Digital</a> is seen apparently inhabiting physical space.</li>
              </ul>
            </li>

            <li>February 25, 2016
              <ul>
                <li>After a short burst of activity involving various packages being shipped to <i>The Digicade</i>, <a href="#div11">Digital</a> emerges from the building with a completely different appearance. It is theorized that at this point, he became
                  the first <i>Synthetic</i>.</li>
              </ul>
            </li>

            <li>2017
              <ul>
                <li>At an indeterminate point, <a href="#div11">Digital</a> vanishes completely.</li>
                <li>In Japan, a man by the name of <i>Keiichi Morisato</i> discovers a severed eyeball in the mail. Upon investigation, it is determined that this eye is not entirely organic.</li>
              </ul>
            </li>

            <li>2018 ~ 2089
              <ul>
                <li>World War Three.</li>
                <li>Following the war, The United Council is formed.</li>
                <li>By ruling of the United Council, The United States is broken apart into various zones.</li>
                </ul>
            </li>

            <li>June 14th, 2089
              <ul>
                <li>A New York Times article comes out covering the rise of the company <i>Zephyr Corporation</i>. Interest immediately rises.</li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <div class="catinfo" id="cat3">
        3.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.<br><br> 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 class="catinfo" id="cat4">
        <input type="checkbox" for="defineswitch" id="defin1">
        <input type="checkbox" for="defineswitch" id="defin2">
        <div id="catinside">
          <b><i>Please click on any word.</i></b><br><br>
        <label for="defin1">Synthetic / Synthite</label><br>
          <div class="fillout" id="defin11">
            'Synthetics' are citizens whose bodies are primarily made of cybernetic parts. 'Synthite' is a slang term, eventually taking on a more derogatory meaning as modifications edge more towards the violent or excessive.
          </div><br>

          <label for="defin2">The United Council</label>
          <div class="fillout" id="defin12">
            In the wake of World War Three, most countries suffered equally. The result was the formation of The United World Council, an organization that presides over all large matters of security and conflict over all countries. The officials are not elected by vote and are instead appointed.
          </div><br>

        </div>

      </div>
      <div class="catinfo" id="cat5">
<div id="catinside">
        This profile is <b>still</b> a work in progress, of course. Please check back every few days for updates!<br><br> All coding is <a href="http://roleplay.chat/profile.php?user=Digital" target=_blank>my own</a>.<br><br> Patch notes //<br>

        <ul>
          <li>11/18/16
            <ul>
              <li>Introduced 'Digital', 'Mikah' and 'Zora' as Players.</li>
              <li>Added 'Introduction', 'Timeline', 'Locations', 'Definitions', and 'OOC' sections.</il>
            </ul>
            </li>
        </ul>

        <ul>
          <li>11/19/16
            <ul>
              <li>Put in 'patch notes' in OOC.</li>
              <li>Adjustment to allow audio to be turned freely on or off after the introduction.</li>
              <li>Added entries to the 'Timeline' section.</li>
              <li>Added entries to the 'Definitions' section.</li>
            </ul>
            </ill>
        </ul>
      </div>
</div>
    </div>

  </div>

  <div id="switchholder">
    <label for="switch7"><div id="switchkey">♫
    </div></label></div>

</div>