Caicyo #2 ver.2

<style>

body{background: #DAE5D6;
cursor: url(http://cur.cursors-4u.net/symbols/sym-1/sym46.cur), progress !important;}


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

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

::-webkit-scrollbar {
 width: 6px;
 background-color: black;
}

::-webkit-scrollbar-thumb {
 border-radius: 0px;
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
 background-color: red;
 background-image: url(http://www.muraldecal.com/en/img/asfs243-png/folder/products-detalle-png/stickers-1up-extra-life.png);
 width: 2px;
}

#whole {
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background-image: url(http://i.picpar.com/zgfc.png);
 background-position: top right 20%;
 background-size: auto 100%;
 background-repeat: no-repeat;
 overflow: hidden;
}

#speechbubble {
 position: absolute;
 top: 0px;
 left: 0px;
 right: 10%;
 bottom: 50%;
 margin: auto;
 height: 120px;
 width: 400px;
 border-left: 6px solid black;
 border-right: 7px solid black;
 box-sizing: border-box;
}

#speechbubble:before {
 content: '';
 position: absolute;
 top: -20px;
 left: -19px;
 right: -13px;
 height: 25px;
 border: 0px solid black;
 background-image: url(http://i66.tinypic.com/1z65wmp.jpg);
 background-size: 100% auto;
 overflow: hidden;
 background-position: center top;
}

#speechbubble:after {
 content: '';
 position: absolute;
 bottom: -70px;
 left: -8px;
 right: -10px;
 height: 70px;
 border: 0px solid black;
 background-image: url(http://i66.tinypic.com/1z65wmp.jpg);
 background-size: 102% auto;
 overflow: hidden;
 background-position: center bottom;
 -webkit-transform: rotatey(180deg);
}

#backfill {
 position: absolute;
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 z-index: 0;
 background: white;
}

#textbox {
 position: absolute;
 top: -7px;
 bottom: -8px;
 right: -1px;
 left: 5px;
 border: 0px solid red;
 z-index: 3;
 box-sizing: border-box;
 padding: 5px;
 padding-bottom: 0px;
 font-family: 'bodyfont', Times, Arial;
 text-align: left;
 font-size: 13pt;
 overflow: auto;
 font-weight: 600;
 letter-spacing: 2px;
}

#underbox {
 position: absolute;
 bottom: -55px;
 left: 0px;
 height: 30px;
 width: 370px;
 border: 0px solid red;
 z-index: 1;
 box-sizing: border-box;
 padding-left: 10px;
 padding-top: 2px;
 text-align: left;
 font-family: 'bodyfont', Times, Arial;
 font-size: 14pt;
 font-weight: 600;
}

#underbox b {
 height: 30px;
 width: 60px;
 background-image: url(https://lh5.googleusercontent.com/-pie-kArvZbo/UuiZ6W7XU6I/AAAAAAAAAfY/8xwsQ9Bbqfc/w500-h240/tumblr_mm3jqyLulk1qmurn4o1_500.gif);
 display: block;
 background-repeat: no-repeat;
 background-size: auto 90%;
 position: absolute;
 right: 0px;
 bottom: 1px;
 text-decoration: none;
 color: black;
 font-weight: 800;
 -webkit-transition: all .2s;
 transition: .2s;
 border: 0px solid black;
 overflow: hidden;
}

#underbox b:before {
 content: '';
 position: absolute;
 left: 50px;
 top: 0px;
 font-size: 18pt;
 -webkit-transition: all .2s;
 transition: .2s;
 opacity: 0;
 z-index: 1;
}

#underbox b:active {
 -webkit-transition: all 0s;
 transition: all 0s;
 bottom: 4px;
}

#underbox b:active:before {
 opacity: 1;
}

#underbox b audio {
 opacity: 0;
 z-index: 2;
 zoom: 200%;
 margin-top: -10px;
 margin-left: -2px;
}

#underbox a{
text-decoration: none;
color: #1BB1CC;
font-weight: 800;
-webkit-animation: colorshift 1s infinite;
animation: colorshift 1s infinite;}

@-webkit-keyframes colorshift{
0%{color: #1BB1CC;}
20%{color: #1BB1CC; }
30%{color: pink;}
50%{color: pink;}
70%{color: black;}
90%{ color: black;}
100%{color: #1BB1CC;}
}

@keyframes colorshift{
0%{color: #1BB1CC;}
20%{color: #1BB1CC; }
30%{color: pink;}
50%{color: pink;}
70%{color: pink;}
90%{ color: #1BB1CC;}
100%{color: #1BB1CC;}
}

#friendup {
 position: absolute;
 left: 5%;
 bottom: -327px;
 height: 325px;
 width: 155px;
 -webkit-transition: all 1.5s 1s linear;
 transition: all 1.5s 1s linear;
background-color: #D966A6;
}

#friendup:hover{
 -webkit-transition: all 2s linear;
 transition: all 2s linear;
bottom: 0px;}

#friendlist {
 position: absolute;
 height: 325px;
 width: 155px;
 border: 3px solid #D966A6;
 border-bottom: 0px;
 box-sizing: border-box;
 text-align: center;
background-image:url(http://i65.tinypic.com/2zhmyhu.jpg);
background-repeat: no-repeat;
background-position: bottom center;
background-size: auto 110%;
}

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

#friendlist a {
 float: left;
 height: 60px;
 width: 60px;
 box-sizing: border-box;
 border: 2px solid white;
 margin-bottom: 5px;
 overflow: hidden;
 background-color:#1BB1CC;
opacity: .5;
-webkit-transition: all 1s;
transition: all 1s;
margin-bottom: 15px;
}

#friendlist a:hover{
opacity: 1;}

#friendlist img {
 height: 100%;
}

#friendlist a:nth-child(odd) {
 margin-left: 7px;
}

#friendlist a:nth-child(even) {
 float: right;
 margin-right: 7px;
}

.namecap {
 position: absolute;
    top: 238px;
    height: 55px;
 width: 130px;
 border: 2px solid white;
 margin-left: 8px;
 overflow: hidden;
 color: transparent;
 background: white;
 z-index: 0;
 opacity: .2;
 -webkit-transition: all .5s;
 transition: all .5s;
 font-weight: 600;
 font-family: 'bodyfont';
 letter-spacing: 2px;
 font-size: 14pt;
}

#namecap:nth-child(even) {
 margin-top: -30px;
}

#friend1:hover ~ #friend11,
#friend2:hover ~ #friend22,
#friend3:hover ~ #friend33,
#friend4:hover ~ #friend44,
#friend5:hover ~ #friend55,
#friend6:hover ~ #friend66 {
 color: #D966A6;
 z-index: 1;
opacity: 1;
}

.friendcontainer {
float: left;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 padding-top: 10px;
 box-sizing: border-box;
 -webkit-transition: all .5s;
 transition: all .5s;
}


#illuminati {
 position: absolute;
 top: -62px;
 left: 0px;
 height: 60px;
 width: 150px;
 border: 0px solid black;
 box-sizing: border-box;
 text-align: center;
 z-index: 1;
}

#framing {
 position: absolute;
 height: 50px;
 width: 50px;
 top: 10px;
 left: 0px;
 right: 0px;
 margin: auto;
 background-image: url(https://media.giphy.com/media/bi1dfmrAxEGyc/giphy.gif);
 background-repeat: no-repeat;
 background-position: bottom -13px center;
 background-size: auto 140%;
}

</style>

<div id="backback">
</div>

<div id="whole">


 <div id="speechbubble">
 <div id="backfill">
 </div>
 <div id="textbox">

◬ Some kind of saber-tooth.<br>
◬ Twenty two. <br>
◬ 5' 9½''<br>
◬ Feminine lean.<br>
◬ Lithe but toned build. <br>
◬ Easy going but a bit standoffish.<br>
◬ Somewhat of a pessimist.<br>
◬ Will retaliate if provoked.<br>
◬Takes awhile to warm up to others; you're special if this happens.<br>
◬ Single.<br>
◬ Dropped out of college, holding a job at his parents business for now. <br>
➟ THC ➟ Coffee ➟ Alternative/electronic music <br>
I do not claim this art as my own.


 </div>

 <div id="underbox">
 <b>
 <audio src="http://k003.kiwi6.com/hotlink/zhx0imqi7g/The_Neighbourhood_-_Wiped_Out_Audio_1_.mp3" controls loop=3>
 </audio></b>


<a target="_blank" href="http://oi63.tinypic.com/25071o8.jpg" target="_blank">❗</a> <a target="_blank" href="http://oi65.tinypic.com/15plmo3.jpg" target="_blank">🔥</a> <a target="_blank" href="http://oi64.tinypic.com/qxrjiw.jpg" target="_blank">💣</a> <a target="_blank" href="http://oi67.tinypic.com/2uq2o89.jpg" target="_blank">▊▊</a>


 </div>
</div>

 <div id="friendup">
 <a id="illuminati" href="#div1">
 <div id="framing">
 </div>
 </a>
 <div id="friendlist">

 <div class="friendcontainer">
 <a id="friend1" href="" target=_blank>
 <img src="http://i66.tinypic.com/35mfxpu.jpg" /></a>
 <a id="friend2" href="" target=_blank>
 <img src="http://i66.tinypic.com/35mfxpu.jpg" /></a>
 <a id="friend3" href="" target=_blank>
 <img src="http://i66.tinypic.com/35mfxpu.jpg" /></a>
 <a id="friend4" href="" target=_blank>
 <img src="http://i66.tinypic.com/35mfxpu.jpg" /></a>
 <a id="friend5" href="" target=_blank>
 <img src="http://i66.tinypic.com/35mfxpu.jpg" /></a>
 <a id="friend6" href="" target=_blank>
 <img src="http://i66.tinypic.com/35mfxpu.jpg" /></a>
 <div class="namecap" id="friend11">one.
 </div>
 <div class="namecap" id="friend22">two.
 </div>
 <div class="namecap" id="friend33">three.
 </div>
 <div class="namecap" id="friend44">four.
 </div>
 <div class="namecap" id="friend55">five.
 </div>
 <div class="namecap" id="friend66">six.
 </div>
 </div>

 </div>
 </div>

</div>