ATHENNNAAA

<style>

.pfor {display: none;}

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

body {background: transparent;
text-align: center;}

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

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

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

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

a{text-decoration: none; color: purple; transition: all 1s;
-webkit-transition: all 1s; font-weight: 600;}
a:hover{color: black; text-decoration: underline;}

#whole{position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image:url(http://i67.tinypic.com/10dfc06.jpg);
background-repeat: no-repeat;
background-size: auto 100%;
background-position: bottom left;
background-color: #DB9FC1;}

#boxes{
  position: absolute;
  left: 400px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  height: 500px;
  width: 400px;
  border: 0px solid black;
  box-sizing: border-box;
  padding-left: 20px;
  padding-top: 20px;
}

.titles{float: left;
height: 50px;
width: 450px;
border: 0px solid black;
margin-bottom: 30px;
transition: all 1s;
-webkit-transition: all 1s;
overflow: hidden;
padding-left: 20px;}

.thatheader{float: left;
  height: 20px;
  width: 300px;
margin-top: 0px;
  margin-left: 0px;
color: #95346A;
  font-family:'header';
  font-size: 20pt;
  font-weight: 600;
  text-align: left;
  text-shadow: 1px 1px 20px purple;
  transition: all 1s;
  -webkit-transition: all 1s;
}

.titles:hover{
  height: 195px;
}

.titles:hover + .titles{
  margin-top: 10px;
}

.titles:hover .thatheader{
  text-shadow: 1px 1px 5px purple;
}

.thatbody{
margin-left: 10px;
margin-top: 55px;
height: 135px;
width: 400px;
border: 0px solid black;
font-family: 'Times';
font-size: 12pt;
color: purple;
  font-weight: 500;
letter-spacing: 2px;
  opacity: 0;
  font-family:'bodyfont';
transition: all 1s;
-webkit-transition: all 1s;
overflow: scroll;
overflow-x: hidden;
text-align: left;
box-sizing: border-box;
padding-right: 30px;
z-index: 2;
line-height: 15px;}

.titles:hover .thatbody{
  opacity: 1;
  transition: all 1s 1s;
  -webkit-transition: all 1s .4s;
}



@keyframes shifting{
  0%{margin-left: 0px;
  margin-top: 0px;}
  50%{margin-left: 10px;
  margin-top: 0px;}
  100%{margin-left: 0px;
  margin-top: 0px;}
}

@-webkit-keyframes shifting{
    0%{margin-left: 0px;
  margin-top: 0px;}
  50%{margin-left: 10px;
  margin-top: 0px;}
  100%{margin-left: 0px;
  margin-top: 0px;}
}

</style>


<div id="whole">
  <div id="boxes">
    <div class="titles">
      <div class="thatheader" style="-webkit-animation: shifting 1s .5s infinite; animation: shifting 1s .5s infinite;">ATHENA
      </div>
      <div class="thatbody"><ul><li>Name - Athena Asamiya</li>
        <li>Birthdate - March 14, (2002 in Ordinary Life); 17 years old (KOF '94), 18 years old (KOF series)</li>
        <li>Occupation - Pop singer, student</li>
        <li>Fighting Style - Psychic powers<br>Chinese martial arts</li>
        <li>Measurements - 83cm, 57cm, 82cm</li>
        </ul>
      </div>
    </div>
    <div class="titles">
      <div class="thatheader" style="-webkit-animation: shifting 1s 1s infinite; animation: shifting 1s 1s infinite;">History.
      </div>
      <div class="thatbody">Athena is a modern day high school girl in Japan. She teamed up with her friend, Sie Kensou, to fight in the name of justice. In Psycho Soldiers, she was one of the "heroes of light" who defended the world from the Shiguma forces. Her psychic powers are believed to be transmigrated to her rather than inherited by her family. As such, she is sometimes referred to as the resurrected Athena who is gifted with esper-like powers.
      </div>
    </div>
    <div class="titles">
      <div class="thatheader" style="-webkit-animation: shifting 1s .5s infinite; animation: shifting 1s .5s infinite;">Likes/Dislikes.
      </div>
      <div class="thatbody" style="line-height:14px;">
        <ul><b>Likes</b>
        <li>    Peter Rabbit tea set</li>
        <li>letters from fans</li>
        </ul>
      <ul><b>Dislikes</b>
          <li>Grasshoppers</li></ul>
<ul>        <b>Hobbies</b>
          <li>Creating homepages</li>
          <li>Shopping by catalogue/online</li>
        </ul>
      </div>
    </div>
    <div class="titles">
      <div class="thatheader" style="-webkit-animation: shifting 1s 1s infinite; animation: shifting 1s 1s infinite;">OOC.
      </div>
      <div class="thatbody">I don't even know <b>why</b> I did this, lol.<br>
Art is obviously not mine.<br>
Character property of SNK.<br>
Music credited to <a href="https://youtu.be/KSpdWgRrWB0" target="_blank">DJ Dicks</a>.<br>
Information was pulled from <a href="http://http://snk.wikia.com/wiki/Athena_Asamiya" target="_blank">Athena's SNK-Wiki</a>.
<br> <br>       <b>ATHENA, IKIMASUUU!</b>
      </div>
    </div>
    <div class="titles">
      <div class="thatheader" style="-webkit-animation: shifting 1s .5s infinite; animation: shifting 1s .5s infinite;">Music.
      </div>
      <div class="thatbody">
        <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="129" height="20">
<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />
<param name="wmode" value="transparent" />
<param name="FlashVars" value="mp3=https://dl.dropboxusercontent.com/u/4556289/The%20Psycho%20Ball.mp3&autoplay=1&loop=1&volume=10&bgcolor1=ed799a&bgcolor2=ed799a&slidercolor1=83315F&slidercolor2=83315F&buttoncolor=000000&buttonovercolor=FFFFFF&sliderovercolor=FFFFFF" />
</object>

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