Taker Wolf

<style>

@import url(//fonts.googleapis.com/css?family=Permanent+Marker|Gloria+Hallelujah|Amatic+SC|Chewy|Bangers|Kaushan+Script);

.pfor{display: none;}
#profile {background: transparent; border:0px;}

#whole {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
background: #E5E6E8;
background-image:
url(http://i18.photobucket.com/albums/b149/abysmal_rage/1320240098.likihouse_fa_edited.jpg);
background-repeat: no-repeat;
background-position: bottom right;
background-size: auto auto;}

#otherbackground{ position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image: url(http://i18.photobucket.com/albums/b149/abysmal_rage/1302110638.likihouse_8696_render.png);
background-repeat: no-repeat;
background-size: auto 70%;
background-position: left bottom;
-webkit-animation: backchange 10s infinite;
animation: backchange 10s infinite;
z-index: -100;
background-color: #E5E6E8;
opacity: 0; }

#titlediv {position: absolute;
top: 100px;
left: 300px;
font-family: 'Amatic SC', cursive;
font-size: 50pt;
color: #45413E;
font-style: italic;
text-shadow: 1px 2px 4px black;
letter-spacing: 20pt;
}

#contentdiv {position: absolute;
top: 200px;
left: 310px;
font-family: 'Permanent Marker', cursive;
color: black;
font-size: 10pt;
letter-spacing: 10pt;
opacity: 1;
transition: all 1s;
-webkit-transition: all 1s;
}

#contentdiv2 {position: absolute;
top: 200px;
left: 310px;
font-family: 'Permanent Marker', cursive;
color: black;
font-size: 10pt;
letter-spacing: 2pt;
backgound-color: #E5E6E8;
opacity: 0;
transition: all 1s;
-webkit-transition: all 1s;
}

#spinner1 {position: absolute;
top: 110px;
left: 180px;
height: 100px;
width: 100px;
border: 1px solid black;
font-family: Arial;
font-size: 70pt;
color: black;
overflow: hidden;
border-radius: 90px 10px 90px 10px;
transform: rotate(-45deg);
transition: all 1s;
-webkit-transition: all 1s;}

#textstuff {position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
text-align: center;
z-index: 1;
transform: rotate(45deg);
margin-top: -5px;
margin-right: -5px;
transition: all 1.5s;
-webkit-transition: all 1.5s;}

#backgroundstuff {position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background: #77746F;
opacity: .8;}


#whole:hover #spinner1 {
  transform: rotate(135deg);}

#whole:hover #textstuff {
  color: #E5E6E8;
  margin-top: -6px;
  margin-right: -6px;}

#whole:hover #contentdiv{
  opacity: 0;
  transition: all 1s .5s;
-webkit-transition: all 1s .5s;}

#whole:hover #contentdiv2{
  opacity: 1;
  transition: all 1s .5s;
-webkit-transition: all 1s .5s;}


@-webkit-keyframes backchange {
0% { opacity: 0; }
30% { opacity: 0; }
40% { opacity: 1; }
80% { opacity: 1; }
90% { opacity: 0; }
100% { opacity: 0; }
}

@keyframes backchange {
0% { opacity: 0; }
30% { opacity: 0; }
40% { opacity: 1; }
80% { opacity: 1; }
90% { opacity: 0; }
100% { opacity: 0; }
}

  </style>


<div id="whole">

<div id="otherbackground">
</div>

<div id="titlediv">Taker Wolf
</div>
<div id="contentdiv">
Mad Max Alternate OC
</div>
<div id="contentdiv2">
Anarkist <a style="text-shadow: 2px 2px 10px #77746F; color:black;" title="Norse God attributed with poetry.">Bragi</a> Wolf / 7'6" / Rock, Sex, Death
</div>
<div id="spinner1">
<div id="textstuff">♦</div>
<div id="backgroundstuff">
</div></div>