Sugar Rae

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Satisfy);
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

::-webkit-scrollbar-thumb:vertical
{
background-color:transparent;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
::-webkit-scrollbar
{
width:6px;
height:20px;
background-color:transparent;
}

body {
background-image: url("http://i.imgur.com/aWwGKgV.jpg");
background-repeat: no-repeat;
background-color: #efd9a8;
background-size: 100% 100%;
background-position: bottom right;
margin: 0;
}



.box {position: absolute;
z-index: 3;
left: 17%;
top:30%;
border: 3px groove #3a8afb;
height:40%;
width:17%;
background-color:#;
background: url(http://i.imgur.com/hNLx2CO.jpg);
 background-size: 100% 100%;
 background-position: center;
 background-repeat: no-repeat;
overflow-x:auto;
overflow-y:auto;
font-family: indie flower;
font-size:14px;
color:#ccc;}

.box2 {position: absolute;
z-index: 3;
left: 65%;
top:30%;
border: 3px groove #3a8afb;
height:40%;
width:17%;
background-color:#;
background: url(http://i.imgur.com/hNLx2CO.jpg);
 background-size: 100% 100%;
 background-position: center;
 background-repeat: no-repeat;
overflow-x:auto;
overflow-y:auto;
font-family: indie flower;
font-size:14px;
color:#ccc;}


.content {
background-color: #292929;
border: none;
color: #ccc;
font-size: 14px;
font-family: indie flower;
line-height:18px;
height: 100%;
left: 0%;
opacity: 0;
overflow: auto;
position: absolute;
text-align: left;
top: 0%;
width: 100%;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.content:target {
background-color: #292929;
border: none;
height: 100%;
left: 0%;
opacity: 0.9;
overflow: auto;
position: absolute;
top: 0%;
width: 100%;
z-index: 40;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}

.content2 {
background-color: #292929;
border: none;
color: #ccc;
font-size: 14px;
font-family: indie flower;
line-height:18px;
height: 100%;
left: 0%;
opacity: 0;
overflow: auto;
position: absolute;
text-align: left;
top: 0%;
width: 100%;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.content2:target {
background-color: #292929;
border: none;
height: 100%;
left: 0%;
opacity: 0.9;
overflow: auto;
position: absolute;
top: 0%;
width: 100%;
z-index: 40;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}

.tab1 {position: fixed;top: 14%;left: 17%; width: 17%; height: 15%; border: 3px groove #3a8afb; background-image: url(http://i.imgur.com/yIq8iDi.gif); background-size: 100% 100%;}
.tab2 { position: fixed; top: 71%; left: 17%; width: 17%; height: 15%; border: 3px groove #3a8afb; background-image: url(http://i.imgur.com/ck4iiFt.gif); background-size: 100% 100%;}
.tab3 { position: fixed; top: 14%; left: 65%; width: 17%; height: 15%; border: 3px groove #3a8afb; background-image: url(http://i.imgur.com/oVQKNIN.gif); background-size: 100% 100%;}
.tab4 { position: fixed; top: 71%; left: 65%; width: 17%; height: 15%; border: 3px groove #3a8afb; background-image: url(http://i.imgur.com/Y4BNL0V.gif); background-size: 100% 100%;}

h1{
letter-spacing:2px;
margin:0px;
color:#afc8ff;
font-size:22px;
text-align:center;
margin-top:8px;
margin-bottom:5px;
 text-shadow: -0.1vw 0.1vw 0.1vw #000;
 font-family: satisfy;
 font-size: 3.2vh;
}


b, strong { color: #6DBCFD}

a:active, a:link, a:visited {
color: #3FA9FF;
text-decoration: none;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}

a:hover {
color: #667CAA;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
transition-duration:0.5s;
}

#music{ position:fixed;height: 55px;width: 55px;bottom: 2%;right: 1%; margin: auto; z-index:99;}
#music1{ position:fixed; padding:2px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;}
#music1:hover #music2{ opacity:0; margin-top:-25px; z-index:-1;}
#music1:hover #music3{ opacity:0.7; margin-top:0px; z-index:99;}
#music1:hover #musiclist{ opacity:1;}
#music2{ opacity:1; background-color:#3FA9FF; padding:6px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;}
#music3{ opacity:0; position:fixed; background-color:#3FA9FF; background-image: url('http://assets.clickmotive.com/Designs/LEMidnight/playButton.png'); background-repeat: no-repeat; background-size: 25px; border:1px dotted #b3b3e5; width:25px; height:25px; z-index:99 margin-left:0px; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;}

#credit{ position: fixed;
left: 1px;
bottom: 0px;
font-family: Arial;
font-variant: normal;
font-weight: normal;
font-size: 90%;
color: #3a8afb;
z-index:1;}

</style>
<div id="credit">
Layout © <a href="profile.php?user=Pachi" target="_blank">Pachi</a>
</div>
<a href="#"><img src="http://i.imgur.com/w45CaYK.png" height="100%" style="position:fixed; bottom:0%; left: 38%;"></a>

<a href="#1"><div class="tab1"></div></a>
<a href="#2"><div class="tab2"></div></a>
<a href="#3"><div class="tab3"></div></a>
<a href="#4"><div class="tab4"></div></a>


<div class="box">
<div id="1" class="content">
<h1>Header</h1>
words <b>Bold</b> <i>italics</i> <a href="link.com" target="_blank">Link</a>

</div>

<div id="2" class="content">
<h1>Header</h1>
words
</div>
</div>

<div class="box2">
<div id="3" class="content2">
<h1>Header</h1>
words
</div>

<div id="4" class="content2">
<h1>Header</h1>
words
</div>
</div>

<div id="music">
<div id="music1">
<div id="music2">
<img src="http://38.media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif" style="opacity: 0.8;"></div>
<div id="music3">
<Div style="margin-top:4px;">
<audio controls loop style="opacity: 0;"><source src="mp3 url here"></audio>
</div>