Rugal

<style>

@font-face{
  src:url(https://dl.dropboxusercontent.com/u/4556289/NOVASOLID%20___.ttf);
  font-family:'GQfont';
}

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

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

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

::-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: black;
}

body{
  overflow: hidden;
}

#whole{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: white;
  background-image:url(http://i.imgur.com/laKC1J2.jpg);
  background-size: cover;
  background-position: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

#pageone{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  border: 0px solid black;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 2px 2px 7px 3px black;
  height: 95vh;
  width: 80vh;
  background-image:url(http://i.imgur.com/2THktHA.png);
  background-color: whitesmoke;
  overflow: hidden;
  z-index: 3;
  -webkit-transition: all 2s;
  transition: all 2s;
}

#pageone:before{
  content:'';
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border-radius: 5px;
  border: 5px solid #645B65;
  z-index: 6;
}

#rugalimage{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image:url(http://i.imgur.com/OI9qgj5.png);
  background-size: auto 100%;
  background-position: bottom right;
  background-repeat: no-repeat;
  -webkit-transition: all .5s;
  transition: all .5s;
}

#rugalimage:after{
  content:'';
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image:url(http://i.imgur.com/OI9qgj5.png);
  background-size: auto 100%;
  background-position: bottom right -10px;
  background-repeat: no-repeat;
  z-index: -1;
  -webkit-filter: brightness(50%) grayscale(100%) blur(3px);
  opacity: .8;
    -webkit-transition: all .5s;
  transition: all .5s;
}

#titleopener{
  position: absolute;
  top: -120px;
  left: -20px;
  height: 410px;
  width: 370px;
  border: 0px solid black;
  font-family:'GQfont', Times;
  font-size: 300pt;
  font-weight: 600;
  letter-spacing: -50px;
  opacity: 1;
  text-align: left;
  box-sizing: border-box;
  padding-left: 20px;
  overflow: hidden;
  text-shadow: 1px 1px 1px black;
  z-index: 6;
}

#titleopener b{
  font-weight: 600;
  opacity: .7;
  color: red;
}

#titleopener b:nth-child(1){
  color: #2A1D2B;
}

#titlemini{
  position: absolute;
  bottom: 0px;
  border: 0px solid black;
  left: 40px;
  height: 65px;
  width: 250px;
  text-align: left;
  font-family:'GQfont', Times;
  font-size: 15pt;
  letter-spacing: 3px;
  color: #645B65;
  text-shadow: 1px 1px 1px black;
  line-height: 25px;

}

#titlemini a{
  text-decoration: none;
  color: #645B65;
  text-shadow: 1px 1px 1px black;
  -webkit-transition: all .5s;
  transition: all .5s;
}

#titlemini a:hover{
  color:  #C42622;
  opacity: .8;
}

#titlemini i{
  font-style:normal;
  font-size: 10pt;
  text-shadow: 0px 0px 0px black;
  position: absolute;
  line-height: 13px;
  margin-left: 15px;
  text-shadow: 1px 1px 1px black;
}

#titlemini i i{
    font-family:'Times New Roman';
  font-weight: 800;
  position: relative;
  margin-left: 0px;
  letter-spacing: 0.8px;
}

#RugalName{
  position: absolute;
  right: 5px;
  top: 0px;
  height: 300px;
  width: 400px;
  border: 0px solid black;
  font-family:'Rugalfont', Times;
  font-size: 42pt;
  color: black;
  text-align: center;
  text-shadow: 0px 0px 4px black;
  box-sizing: border-box;
  padding-top: 25px;
  z-index: 6;
  opacity: .8;
}

#RugalName:before{
  content:'Rugal Regal';
  position: absolute;
  z-index: 1;
  color: #e80600;
  padding-left: 2px;
  text-shadow: 0px 0px 0px black;
  opacity: .8;
  text-align: center;
}

#Rugalnamextra a{
  position: absolute;
  border: 0px solid black;
  right: 10px;
  top: 100px;
  height: 190px;
  width: 190px;
  text-align: center;
  font-family:'subfont', Times;
  color: black;
  font-size: 13pt;
  font-weight: 600;
  text-shadow: 1px 1px 3px black;
  -webkit-transition: all .5s;
  transition: all .5s;
  text-decoration: none;
  z-index: 5;
  overflow: hidden;
  height: 90px;
}

#Rugalnamextra a:hover{
  text-shadow: 1px 1px 3px #C42622;
}

#selectionmenu{
  position: absolute;
  left: 5px;
  top: 300px;
  border: 0px solid black;
  height: 400px;
  width: 300px;
  font-family:'selectfont', Times;
  font-size: 40pt;
  font-weight: 800;
  box-sizing: border-box;
  line-height: 110px;
  padding-left: 20px;
  color: #2A1D2B;
  text-shadow: 1px 1px 2px #C42622;
  z-index: 6;
  -webkit-transition: all .2s;
  transition: all .2s;
}

#selectionmenu a{
  text-decoration: none;
  color: #2A1D2B;
  opacity: .9;
  -webkit-transition: all .5s;
  transition: all .5s;

}

#selectionmenu a:before{
    position: absolute;
  font-family:'subfont';
  font-size: 13pt;
  margin-top: 25px;
  color: black;
  text-shadow: 1px 1px 3px black;
  letter-spacing: 3px;
  background: transparent;
  height: 70px;
  overflow: hidden;
}

#selectionmenu a:nth-child(1):before{
  content:'And the best way to use it';
}

#selectionmenu a:nth-child(3):before{
  content:'How to make the A list';
}

#selectionmenu a:nth-child(5):before{
  content:'Can any man have too much?'
}

#selectionmenu a:hover{
  text-shadow: 0px 0px 7px red;
}

#RatedRoption{
  position: absolute;
  bottom: 15px;
  left: 15px;
  height: 60px;
  width: 40px;
  border: 0px solid black;
  font-family:'GQfont';
  font-size: 50pt;
  color: gray;
  text-shadow: 1px 1px 4px black;
  z-index: 10;
  text-align: center;
  -webkit-transition: all .3s;
  transition: all .3s;
}

#RatedRoption:hover{
  text-shadow: 1px 1px 3px red;
}

#ratedR:checked ~ #whole #RatedRoption{
  color: red;
}

#ratedR:checked ~ #whole #rugalimage{
  background-image:url(http://i.imgur.com/WtlGEON.png);
}

#ratedR:checked ~ #whole #rugalimage:after{
  background-image:url(http://i.imgur.com/WtlGEON.png);
}

#div1:target ~ #whole #pageone,
#div2:target ~ #whole #pageone,
#div3:target ~ #whole #pageone,
#div4:target ~ #whole #pageone{
  left: 700px;
}

.thedivs{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 500px;
  bottom: 0px;
  margin: auto;
  border: 1px solid black;
  height: 400px;
  width: 300px;
  border: 1px solid black;
  border-radius: 6px;
  background-color: rgba(232, 222, 222, 0.62);
  -webkit-transition: all 1.5s;
  transition: all 1.5s;
  z-index: 0;
  opacity: 0;
}

#div1:target ~ #whole #firstdiv,
#div2:target ~ #whole #seconddiv,
#div3:target ~ #whole #thirddiv,
#div4:target ~ #whole #fourthdiv{
  -webkit-transition: all 1s 1s;
  transition: all 1s 1s;
  z-index: 1;
  opacity: 1;
}

.thedivs:after{
  content:'';
  position: absolute;
  top: 30px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-radius: 0px 0px 5px 5px;
  background: rgba(255, 255, 255, 0.44);
  z-index: 0;
  box-shadow: 1px 1px 3px black;
}

#firstdiv:before,
#seconddiv:before,
#thirddiv:before,
#fourthdiv:before{
  position: absolute;
  top: 5px;
  left: 10px;
  right: 10px;
  height: 25px;
  background: gray;
  text-align: center;
  box-sizing: border-box;
  font-size: 15pt;
  color: rgba(0, 0, 0, .7);
  font-family:'subfont';
  font-weight: 600;
  color: #7b1e1e;
  box-shadow: 1px 1px 3px black;
}

#firstdiv:before{
  content:'Information';
}

#seconddiv:before{
  content:'Physical Stats';
}

#thirddiv:before{
  content:'Associates';
}

#fourthdiv:before{
  content:'OOC Information';
}

#firstdiv:before{
  content:'Information';
}

#divcontent{
  position: absolute;
  top: 30px;
  left: 10px;
  right: 10px;
  bottom: 12px;
  z-index: 1;
  box-sizing: border-box;
  padding: 10px;
  padding-top: 5px;
  overflow: auto;
  border: 0px solid black;
  font-family:'selectfont';
  font-weight: 800;
  letter-spacing: 1px;
  font-size: 10pt;
}

#musicplayer{
  position: absolute;
  top: 10px;
  right: 50px;
  height: 30px;
  width: 30px;
  border: 1px solid white;
  border-radius: 5px;
  background: white;
  font-family:'GQfont';
  font-size: 18pt;
  text-align: center;
  color: #ce3636;
  text-shadow: 1px 1px 2px black;
  box-sizing: border-box;
  box-shadow: 0px 0px 6px 2px red;
  -webkit-transition: all .2s;
  transition: all .2s;
  overflow: hidden;
}

#musicplayer:active{
  color: black;
}

#musicplayer audio{
  opacity: 0;
  zoom: 110%;
}

</style>

<input type="checkbox" name="therating" id="ratedR">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

<div id="whole">

  <div id="pageone">
    <div id="rugalimage">
    </div>
    <div id="titleopener">
      <b>F</b><b>A</b>
      <div id="titlemini">
       Finance & Affluence<br>
        <a href="#blank"><i>M A R<br>
          <i>2 0 1 7</i></i></a>
      </div>
    </div>

    <div id="RugalName">Rugal Regal?

      <div id="Rugalnamextra">
        <a href="#div4">This billionaire bachelor took the world by storm. <br><br>
          What's his next goal?</a>

      </div>
    </div>

  <div id="selectionmenu">

    <a href="#div2">POWER</a><br>
    <a href="#div1">FAME</a><br>
    <a href="#div3">FORTUNE</a><br>


  </div>

    <label for="ratedR">
  <div id="RatedRoption">
    R
  </div>
      </label>

  </div>

  <div id="firstdiv" class="thedivs">
    <div id="divcontent">
      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>

    <div id="seconddiv" class="thedivs">
    <div id="divcontent">
      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>

    <div id="thirddiv" class="thedivs">
    <div id="divcontent">
      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>

    <div id="fourthdiv" class="thedivs">
    <div id="divcontent">
      Profile is a WIP.<br>
    </div>
  </div>

  <div id="musicplayer">
    MP
    <div style="position: absolute;
             top: -2px;
             width: 200px;
             height: 200px;
             right: -170px;">
      <audio controls src="https://puu.sh/urS0b/8e0d7f6673.mp3" />
    </div></div>

</div>