Trent

<style type="text/css">

@import url(http://fonts.googleapis.com/css?family=Overlock+SC);
@import url(http://fonts.googleapis.com/css?family=Play);
@import url(https://fonts.googleapis.com/css?family=Coming+Soon);
@import url(https://fonts.googleapis.com/css?family=Architects+Daughter);
@import url(http://fonts.googleapis.com/css?family=Play|Arizonia);
@import url(https://fonts.googleapis.com/css?family=Gloria+Hallelujah);

.pfor {display: none;}


#profile {background-color: transparent; border: 0px;}


::-webkit-scrollbar-thumb:vertical {background: #fff; Width: 12px; border-radius: 90px; height: 10%;}
::-webkit-scrollbar-thumb:horizontal {background-color: #000000; width: 4px; height: 10%; !important;}
::-webkit-scrollbar {height: 3px; width: 5px; background-color: transparent;}


body{
background-color:#fff;
background-image:url(http://i.imgur.com/oP1q5CI.jpg);
background-position: center;
background-size:100% 100%;
background-repeat:no-repeat;}

.derp{
position:absolute;
bottom:10%;
right:0%;
width:410px;
}

a.gluttony:link, a.gluttony:active, a.gluttony:visited{
display: block;
float: left;
width: 60px;
height:60px;
margin-right: 25px;
margin-top: 15px;

border-radius: 50%;
background-size: 100% 100%;
background-color:#;
background-image:url(http://i.imgur.com/OMmrURa.gif);
background-position: center;
background-repeat:no-repeat;
transform: rotate (0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate (0deg);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
}

a.gluttony:hover{
border-radius:0%;
background-size: 100% 100%;
background-color:#;
background-image:url(http://i.imgur.com/bOFKix0.gif);
background-position: center;
background-repeat:no-repeat;
text-decoration: none;
-webkit-transform:rotate(0deg);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
}


.hero {
background-color: #;
height:36.5%;
left:3%;
opacity:0;
position:fixed;
top:10%;
width:31%;
-webkit-transition:all 0.7s ease-in;
-moz-transition:all 0.7s ease-in;
-ms-transition:all 0.7s ease-in;
-o-transition:all 0.7s ease-in;
transition:all 0.7s ease-in;
}

.hero:target {
opacity:1;
z-index:5;
top: 40%; }

.broken{
background-image: url();
background-color: #;
color:black;
font-family: coming soon;
font-size:12px;
text-shadow: 0 0 0.3em #E9CF4C;
padding:10px;
width: 100%;
height: 305px;
left: 200%;
overflow-y:auto;
overflow-x:hidden;
position:absolute;
text-align:justify;
top: -90%;
z-index:5;}

.pieces{
color: white;
 opacity:1.0;
 z-index:0;
 position:absolute;
 left:2%;
 top:2%;
 padding: 3px;
 text align: center;
background-color: #2C4776;
 border:2px solid #ccc;
 width: 95%;
 height: 92%;
 overflow:auto;
 }

.watchme{
background-image: url();
background-color: #;
color:black;
font-family: coming soon;
font-size:12px;
text-shadow: 0 0 0.3em #E9CF4C;
padding:10px;
height: 295px;
width: 100%;
top: 35%;
left: 7%;
overflow:auto;
position:absolute;
text-align:justify;
z-index:5;}

.burn{
color: white;
 opacity:1.0;
 z-index:0;
 position:absolute;
 left:2%;
 top:2%;
 padding: 3px;
 text align: center;
background-color: #2C4776;
 border:2px solid #ccc;
 width: 95%;
 height: 92%;
 overflow:auto;
 }




h1 { Color: #000; Border-bottom: 1px solid #fff; Border-left: 40px solid #0b9c93; Border-right: 40px solid #e3c84a; font-size:16px; text-align: center; Text-Shadow: #878487 2px 1px 1px; font-family: 'Architects Daughter', cursive; Margin-top: 6px;}



Strike {Color: #e3c84a; Text-shadow: 1px 1px 1px #000;}

U { Color: #0b8b6c;Border-bottom: 2px dotted #e3c84a;}


i{font-variant: all-caps;font-size: 11px; color: #0b8b6c; Text-shadow: 0.5px 0px 0px #fff;}

b{Color: #914040; Text-shadow: 1px #fff; Font-size: 13px; Font-family: Segoe Script;
}

a {text-decoration: none; Color: #E68507;}

a:hover {color: #FFFF00; transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out;}

h3 {
font-family: Gloria Hallelujah;
color: #AAAD4F;
font-size:20px;
letter-spacing:2px;
margin-bottom:1px;
margin-top:3px;
text-align: center;
width: 100%;}

 h2{
font-size: 16px;
width: 100%;
color: #82FFC5;
font-family: 'Play', cursive;
font-weight: normal;
line-height: 12px;
text-transform: uppercase;
text-align: left;
border-bottom: 1px solid #dbebea;
}


h2:first-letter{
color: #82FFC5;
font-size: 16px;
font-weight: bold;
text-shadow: 0px 0px 3px #fafafa;
}

.circle{
border-radius:150px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
}

.circle:hover{
border-radius:0px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-webkit-transform: rotate(-360deg);
 -moz-transform: rotate(-360deg);
 -ms-transform: rotate(-360deg);
 -o-transform: rotate(-360deg);

}


#Music {height: 25;
width: 202;
background: transparent;
Position: Absolute;
top: 1%;
left: 30%;


</style>




<div class="derp">
<a href="#1" class="gluttony"></a>
<a href="#2" class="gluttony"></a>
<a href="#3" class="gluttony"></a>
<a href="#Reset" class="gluttony"></a>
</div></div>


<div id="1" class="hero">

<div class="broken">
<div class="pieces">
<h3>Dossier</h3>
<center>
<b>Name:</b> Trent
<br>
<b>Species:</b> Kitsune
<br>
<b>Gender:</b> Male
<br>
<b>Age:</b> 26
<br>
<b>Hair:</b> blonde
<br>
<b>Eyes:</b> orange
<br>
<b>Height:</b> 6'3"
<br>
<b>Weight:</b> 165 lbs
<br>
<b>Build:</b> Athletic
<br>
<b>Orientation:</b> Straight
<br>
<b> Marital Status</b> Single
</center>
</div></div>


<div class="watchme">
<div class="burn">
<h3>History</h3>



</div></div>
</div></div></div>

<div id="2" class="hero">

<div class="broken">
<div class="pieces">
<h3>Personality</h3>



</div></div>


<div class="watchme">
<div class="burn">
<h3>Friends</h3>
<a href="profile.php?user="><img src="http://i.picpar.com/SsKb.jpg" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
<a href="profile.php?user="><img src="http://i.picpar.com/SsKb.jpg" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
<a href="profile.php?user="><img src="http://i.picpar.com/SsKb.jpg" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
<a href="profile.php?user="><img src="http://i.picpar.com/SsKb.jpg" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
<a href="profile.php?user="><img src="http://i.picpar.com/SsKb.jpg" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
</div></div>
</div></div></div>
<div id="3" class="hero">

<div class="broken">
<div class="pieces">
<h3>Abilities</h3>



</div></div>


<div class="watchme">
<div class="burn">

<h3>Out of FoxFire</h3>
I have permission to use this profile. The credit goes to those who know who they are. Please be respectful ad ask before taking thanks.  <br>
<br>
Profile is forever a work in progress. <br>



</div></div>
</div></div></div>