body {
  background-image: url('/assets/bg2.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  font-size: 10pt;
  font-family: Verdana;
  color: #ccc
}

a {
  color:#8000ff;
  transition:0.25s ease-in-out;
  -moz-transition:0.25s ease-in-out;
  -webkit-transition:0.25s ease-in-out;
}

a:hover {
  color:#bf80ff;
  transition:0.25s ease-in-out;
  -moz-transition:0.25s ease-in-out;
  -webkit-transition:0.25s ease-in-out;
}

hr {
  border-top:solid 1px rgba(0,0,0,.5);
  color:transparent;
}

#container1 {
  text-align: center;
}

#container2 {
  text-align: initial;
  display: inline-block;
}

#header {
  text-align: center;
  margin: 5px 0 5px 0;
}

.sidebar {
  width: 150px;
  display: inline-block;
  vertical-align: top;
  margin: 0 5px 0 5px;
}

.sidebar-post {
  background: rgba(0,0,0,.5);
  padding: 10px;
  border: solid 1px rgba(0,0,0,.5);
  margin-bottom: 10px;
}

.sidebar-menu {
  background: rgba(0,0,0,.5);
  padding: 10px;
  border: solid 1px rgba(0,0,0,.5);
  margin-bottom: 10px;
}

.sidebar-menu a {
  text-decoration: none;
}

.menu-button {
  text-align: center;
  margin-top: 3px;
  margin-bottom: 3px;
}

#content {
  max-width: 700px;
  padding: 0px;
  display: inline-block;
  vertical-align: top;
}

.post {
  background: rgba(0,0,0,.5);
  padding: 10px;
  border: solid 1px rgba(0,0,0,.5);
  margin-bottom: 15px;
}

.title1 {
  font-size: 16pt;
  font-weight: bold;
}

.title2 {
  font-size: larger;
  font-weight: bold;
}

.desc {
  font-size: 75%;
}

.char {
  border: solid white 1px;
  margin: 0 0 -1px -1px;
  position: relative;
  z-index: 0;
}

.char:hover {
  border: solid blue 4px;
  margin: -3px -3px -4px -4px;
  position: relative;
  z-index: 1;
}

@font-face {
  font-family: Achen;
  src: url("/assets/fonts/ACHE_BOLDITALIC.TTF");
  /*https://crepa.neocities.org/assets/fonts/ACHE_BOLDITALIC.TTF*/
  /*https://crepa.neocities.org/assets/fonts/AACHEN-REGULAR.TTF*/
  /*https://crepa.neocities.org/assets/fonts/AACHEN%20BOLD%20PLAIN.TTF*/
}

#anim {
  color: white;
  font-family: Achen;
  font-size: 11pt;
  text-align: center;
  text-transform: uppercase;
  width: 160px;
  height: 200px;
  display: inline-block;
  background-position: center 40%;
  background-repeat: no-repeat;
  vertical-align: bottom;
  position: relative;
}

#anim span:before {
  position: absolute;
  bottom: 10%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

#stats {
  width: 200px;
  height: 200px;
  display: inline-block;
  vertical-align: bottom;
  background-position: center center;
  background-repeat: no-repeat;
}

#mika:hover ~ #anim {background-image: url('/assets/chars/mika/stand.gif');}
#mika:hover ~ #stats {background-image: url('/assets/chars/mika/stats.png');}
#mika:hover ~ #anim span:before {content: 'R. Mika';}

#ingrid:hover ~ #anim{background-image: url('/assets/chars/ingrid/stand.gif');}
#ingrid:hover ~ #stats{background-image: url('/assets/chars/ingrid/stats.png');}
#ingrid:hover ~ #anim span:before {content: 'Ingrid';}

#akuma:hover ~ #anim{background-image: url('/assets/chars/akuma/stand.gif');}
#akuma:hover ~ #stats{background-image: url('/assets/chars/akuma/stats.png');}
#akuma:hover ~ #anim span:before {content: 'Akuma';}

#s_akuma:hover ~ #anim {background-image: url('/assets/chars/akuma/s_stand.gif');}
#s_akuma:hover ~ #stats {background-image: url('/assets/chars/akuma/s_stats.png');}
#s_akuma:hover ~ #anim span:before {content: 'Shin Akuma';}

#sakura:hover ~ #anim {background-image: url('/assets/chars/sakura/stand.gif');}
#sakura:hover ~ #stats {background-image: url('/assets/chars/sakura/stats.png');}
#sakura:hover ~ #anim span:before {content: 'Sakura';}

#d_sakura:hover ~ #anim {background-image: url('/assets/chars/sakura/d_stand.gif');}
#d_sakura:hover ~ #stats {background-image: url('/assets/chars/sakura/d_stats.png');}
#d_sakura:hover ~ #anim span:before {content: 'Dark Sakura';}

#footer {
  text-align: center;
}