Jahseh code

<style>

@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);

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

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

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

@font-face{
  src:url(https://dl.dropboxusercontent.com/u/4556289/Vtks%20Street%20Vision.ttf);
  font-family:'font3';
}

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

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

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

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

::-webkit-scrollbar {
 width: 100px;
 background-color: transparent;
}


::-webkit-scrollbar-thumb {
 border-radius: 0px;
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  background-image:url(http://i.imgur.com/MVraBW2.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
}


body{
  background-color: #c1865d;
  background-color: black;
}

#whole{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image:url(http://i.imgur.com/K4Vmihr.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .9;
  -webkit-filter: sepia(40%);
}

#transparentlayer{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image:url(http://i.imgur.com/zHmqVwU.png);
  background-size: 250px;
  z-index: 5;
}

#jahimage{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image:url(http://i.imgur.com/wTGiUvD.png);
  background-repeat: no-repeat;
  background-position: bottom -17% left;
  background-size: auto 80%;
}

#jahimage:before{
  content:'';
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image:url(http://i.imgur.com/wTGiUvD.png);
  background-repeat: no-repeat;
  background-position: bottom -14% left -1%;
  background-size: auto 80%;
  -webkit-filter: brightness(10%) blur(4px);
  opacity: .8;
  z-index: -1;
}

#maintitle{
  position: absolute;
  top: 7vh;
  left: 3vw;
  height: 30vh;
  width: 33vw;
  font-size: 9vw;
  font-family:'titlefont';
  color: white;
  font-weight: 800;
  text-align: center;
  border: 0px solid black;
  text-shadow: 0px 1px 3px black;
  opacity: 1;
}

#maintitle i{
  font-style: normal;
}

#maintitle i:nth-child(even){
  color: #111111;
}

#maintitle i:nth-child(odd){
  color: white;
  font-style: italic;
}

#itemselection{
  position: absolute;
  right: 0px;
  top: 5vh;
  border: 0px solid red;
  height: 70vh;
  width: 30vw;
  text-decoration: none;
  text-align: left;
  line-height: 9.6vw;
}

#itemselection a{
  text-decoration: none;
  text-shadow: 0px 0px 3px black;
  position: fixed;
  border: 0px solid black;
  height: 10vw;
  width: 25vw;
  box-sizing: border-box;
  overflow: hidden;
  font-size: 7vw;
  -webkit-transition: all 1s;
  transition: all 1s;
}

#itemselection a.onelink{
  font-family:'font1', Arial;
  color: #7D9B93;
  letter-spacing: .2vw;
  text-shadow: 4px 0px 3px white;
}

#itemselection a.twolink{
  font-family:'font2', Arial;
  text-shadow: 3px 0px 7px white;
  color: #9B9245;
  font-style: italic;
}

#itemselection a.threelink{
  font-family:'font3', Arial;
  font-style: italic;
  font-weight: 600;
  color: #3B2F30;
  text-shadow: 3px 0px 3px white;
}

#itemselection a.fourlink{
  font-family:'font4', Times;
  font-weight: 800;
  color: #783528;
  text-shadow: 3px 0px 3px white;
}

#itemselection a.fivelink{
  font-family:'font5', Arial;
  color: #4B464D;
  text-shadow: 5px 0px 5px black;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 1vw;
}

#itemselection a.highlink{
  position: fixed;
  height: 10vw;
  width: 25vw;
  box-sizing: border-box;
  overflow: hidden;
  background: gray;
  opacity: 0;
  z-index: 12;
}

#itemselection a.highlink:hover + a{
  -webkit-transition: all 1s;
  transition: all 1s;
  z-index: 11;
  -webkit-filter: hue-rotate(360deg);
}

#largewindow{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 1;
  background: rgba(0,0,0,0.8);
  -webkit-transition: all 0s 1.2s, opacity 1s;
  transition: all 0s 1.2s, opacity 1s;
  opacity: 0;
}

#contentwindow{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 20vw;
  bottom: 0px;
  margin: auto;
  height: 60vh;
  width: 40vw;
    background-color: gray;
  border-radius: 10px;
  background-image:url(http://i.imgur.com/XZZQFRh.png);
  border: 5px solid rgba(0, 0, 0, 0.8);
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.contents{
  position: absolute;
  top: 40px;
  left: 0px;
  right: -110px;
  bottom: 0px;
  overflow: auto;
  font-size: 3vw;
  box-sizing: border-box;
  padding-right: 30px;
  padding-top: 10px;
  padding-left: 10px;
  font-family:'font7', Times;
  text-align: justify;
  opacity: 0;
  -webkit-transition: all .7s;
  transition: all .7s;
  z-index: 1;
}

#contentwindow a.backup{
  z-index: 3;
  position: absolute;
  height: 25px;
  width: 30px;
  right: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.8);
  display: block;
  border-radius: 10px 0px 0px 0px;
  text-align: center;
  color: black;
  text-decoration: none;
  box-sizing: border-box;
  font-size: 20px;
  padding-top: 0px;
  font-family: 'font6';
  font-style: italic;
  font-weight: 600;
  text-shadow: 1px 0px 3px white;
  opacity: 1;
}

.descrip{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  background: rgba(0, 0, 0, 0.8);
  height: 43px;
  text-align: center;
  font-size: 30px;
  letter-spacing: 3px;
  color: white;
  font-family:'font6';
  font-style: italic;
  -webkit-transition: all .5s;
  transition: all .5s;
  opacity: 0;
  z-index: 3;
  -webkit-transition: all .7s;
  transition: all .7s;
}

#div1:target ~ #largewindow,
#div2:target ~ #largewindow,
#div3:target ~ #largewindow,
#div4:target ~ #largewindow,
#div5:target ~ #largewindow{
  z-index: 10;
  height: 100%;
  width: 100%;
  opacity: 1;
  -webkit-transition: all 0s, opacity 1s;
  transition: all 0s, opacity 1s;
}

#div1:target ~ #largewindow #contentwindow,
#div2:target ~ #largewindow #contentwindow,
#div3:target ~ #largewindow #contentwindow,
#div4:target ~ #largewindow #contentwindow,
#div5:target ~ #largewindow #contentwindow{
  opacity: 1;
  -webkit-transition: all 1s;
  transition: all 1s;
}

#div11{
  opacity: 0;
}

#div1:target ~ #largewindow #div11,
#div2:target ~ #largewindow #div22,
#div3:target ~ #largewindow #div33,
#div4:target ~ #largewindow #div44,
#div5:target ~ #largewindow #div55{
  -webkit-transition: all 1s .3s;
  transition: all 1s .3s;
  opacity: 1;
  z-index: 2;
}

.contents a{
  text-decoration: none;
  font-family:'font2';
  color: black;
  text-decoration: underline;
}


#musiclist{
 position: absolute;
 top: 0px;
  left: 0px;
  right: 0vh;
  bottom: 40vh;
  margin: auto;
 height:146.5px;
 width: 380px;
 overflow: auto;
 overflow-x: hidden;
 padding-right: 0px;
 cursor:default;
 border-top: 5px solid black;
 border-bottom: 5px solid black;
border-right: 0px solid black;
box-sizing: border-box;
  z-index: 1;
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
}

#musiclist::-webkit-scrollbar {
 width: 4px;
 background-color: transparent;
}


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

#tracklist{
 position: relative;
 width: 100%;
 height: 31px;
 border: 1px solid black;
 box-sizing: border-box;
 border-top: 0px solid transparent;
 border-right: 2px solid black;
 overflow: hidden;
 -webkit-transition: all 1s;
 transition: all 1s;
 z-index: 1;
}


#infoslide{
 float: left;
 width: 100%;
 height: 100%;
 text-align: left;
 overflow: hidden;
 font-size: 12pt;
 font-weight: 600;
line-height: 31px;
 letter-spacing: 2px;
 font-family: 'musicfont', Times, Arial;
 color: black;
 -webkit-transition: all 1s;
 transition: all 1s;
 box-sizing: border-box;
 padding-left: 40px;
}

#trackplay{
 position: absolute;
 left: 0px;
 top: 0px;
 height: 100%;
 width: 0px;
 border-right: 1px solid black;
 overflow: hidden;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#trackplay audio{
 margin-left: -5px;
 zoom: 110%;
 margin-top: -2px;
}

#tracklist:hover #trackplay{
 width: 25px;
}

#tracklist:hover #infoslide{
 padding-left: 50px;
}

#tracklist:hover{
 -webkit-transition: all .1s;
 transition: all .1s;
 border-left: 2px solid black;
}

/* CUSTOMIZATION */

#infoslide{
 color: white;
letter-spacing: 3px;
text-shadow: 1px 1px 2px black;
}

#musiclist{
 border-color: black ;
 background-color: transparent;
}

#tracklist{
 border-color: ;
 background-color: #e96765 ;
}

#musiccheck{
  opacity: 0;
}

#boombox{
  position: absolute;
  left: 1.5vw;
  bottom: 1vh;
  height: 14vh;
  width: 23vh;
  border: 0px solid black;
  z-index: 10;
  background-image:url(http://i.imgur.com/yDDHIny.png);
  background-size: auto 100%;
  background-position: left;
  background-repeat: no-repeat;
  -webkit-filter:drop-shadow(-10px 0px 2px rgba(0, 0, 0, 0.7));
}


#musiccheck:checked ~ #musiclist{
  z-index: 6;
  opacity: 1;
}

</style>

<input type="checkbox" id="musiccheck">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>

<div id="whole">
</div>

<label for="musiccheck" id="boombox">
</label>

<div id="transparentlayer">

  <div id="jahimage">
</div>

</div>

<div id="maintitle">
  <i>J</i><i>A</i><i>H</i><i>S</i><i>E</i><i>H.</i>
</div>


<div id="itemselection">
  <a href="#div1" class="highlink"></a>
  <a href="" class="onelink">Stats</a><br>
  <a href="#div2" class="highlink"></a>
  <a href="" class="twolink">BIO</a><br>
  <a href="#div3" class="highlink"></a>
  <a href="" class="threelink">Friends</a><br>
  <a href="#div4" class="highlink"></a>
  <a href="" class="fourlink">Pictures</a><br>
  <a href="#div5" class="highlink"></a>
  <a href="" class="fivelink">OOC</a><br>
</div>


<div id="largewindow">
  <div id="contentwindow">
    <a href="#blank"class="backup">X
    </a>
        <a class="descrip" id="div11">STATS
    </a>
    <div id="div11" class="contents">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac augue risus. In at urna dictum, rhoncus diam at, feugiat mauris. Duis tortor magna, placerat rutrum mattis sed, porta vel nunc. Mauris ut tortor non leo iaculis pretium. Donec suscipit mauris vel dolor viverra sagittis ut a tellus. Sed nec odio bibendum, efficitur elit vel, aliquam neque. Nam sodales sapien nunc, sed tempus diam imperdiet sit amet. Proin porta lectus sed fringilla varius. Maecenas quis sem faucibus, bibendum quam et, viverra nunc. Mauris viverra commodo orci, et blandit elit cursus eu. Nam tristique a leo auctor dapibus. Etiam eget sollicitudin lorem. Nulla mauris mauris, ullamcorper aliquet laoreet eget, aliquam eu purus. Suspendisse ac sapien lectus.<br><br>

Vivamus sit amet augue magna. Donec eu ultrices sapien, sed vulputate lorem. Donec ac nisl orci. Etiam fringilla ut dolor ac efficitur. Quisque in augue dignissim, sagittis risus vel, pellentesque erat. Sed mattis, tellus ut tempor eleifend, metus odio luctus neque, nec hendrerit augue erat sit amet eros. In nec dictum lorem. Etiam dignissim at massa id vulputate.<br><br>

Nam luctus hendrerit tortor, ut faucibus nunc imperdiet nec. Pellentesque massa augue, condimentum in consectetur a, vulputate imperdiet est. Donec at sodales elit, ac molestie odio. Maecenas vel lacinia justo. Quisque id velit quam. Praesent aliquam bibendum massa, nec congue ex condimentum a. Maecenas tincidunt ex non leo viverra, sit amet facilisis lorem tempor. Quisque id odio elit.
    </div>

    <a class="descrip" id="div22">BIOGRAPHY
    </a>
    <div id="div22" class="contents">
      A shot at some <a href="">fonts.</a>
    </div>

    <a class="descrip" id="div33">FRIENDS
    </a>
    <div id="div33" class="contents">
    </div>

    <a class="descrip" id="div44">PICTURES
    </a>
    <div id="div44" class="contents">
    </div>

    <a class="descrip" id="div55">OUT OF CHARACTER
    </a>
    <div id="div55" class="contents">
    </div>


  </div>
</div>


<div id="musiclist">

 <div id="tracklist">
 <div id="trackplay">
 <audio controls src="https://www.dropbox.com/s/u0l8my6rv1vd9zc/Black%20Skinhead.mp3?dl=1" loop=3 />
 </div>
 <div id="infoslide">
 Blakkk Skkkinhead // Kkkanye yeezus.
 </div>
 </div>

 <div id="tracklist">
 <div id="trackplay">
 <audio controls src="https://www.dropbox.com/s/2nmd8p6sjpcuybc/broccoli.mp3?dl=1" loop=3 />
 </div>
 <div id="infoslide">
 Brocolli // Yachty and Dram
 </div>
 </div>

 <div id="tracklist">
 <div id="trackplay">
 <audio controls src="https://www.dropbox.com/s/paibr1jtvsopxl8/mad.mp3?dl=1" loop=3 />
 </div>
 <div id="infoslide">
 U Mad? // Vic Mensa and Kanye West
 </div>
 </div>

 <div id="tracklist">
 <div id="trackplay">
 <audio controls src="https://www.dropbox.com/s/t38rd4fvhsu44z0/Future%20-%20Stick%20Talk.mp3?dl=1" loop=3 />
 </div>
 <div id="infoslide">
 Future // Stick Talk
 </div>
 </div>

<div id="tracklist">
 <div id="trackplay">
 <audio controls src="https://www.dropbox.com/s/0px7kz4muojt6k7/Flatbush%20ZOMBiES%20-%20Glorious%20Thugs.mp3?dl=1" loop=3 />
 </div>
 <div id="infoslide">
 Flatbush Zombies // Glorious Thugs
 </div>
 </div>

<div id="tracklist">
 <div id="trackplay">
 <audio controls src="https://www.dropbox.com/s/kl3g7q7i7vxj0dp/The%20Underachievers%20-%20Herb%20Shuttles%20%28%20Official%20Music%20Video%20%29.mp3?dl=1" loop=3 />
 </div>
 <div id="infoslide">
 The Underachievers // Herb Shuttles
 </div>
 </div>

<div id="tracklist">
 <div id="trackplay">
 <audio controls src="https://www.dropbox.com/s/o9qsb3qzyv1mpz2/Desiigner%20-%20Tiimmy%20Turner%20%28Official%20Audio%29.mp3?dl=0" loop=3 />
 </div>
 <div id="infoslide">
 Desiigner // Timmy Turner
 </div>
 </div>


</div>