MMM-MagicSuperHero.css

.MMM-MagicSuperHero-container {
  display: block;
  text-align: center;
  max-width: 280px;
  margin: 0 auto;
}

.MMM-MagicSuperHero-container .mmm-hero-name {
  font-size: 30px;
  line-height: 1;
  color: #aaa;
  text-align: center;
  margin: 0 0 15px;
}

.MMM-MagicSuperHero-container .mmm-hero-stats {
  margin: 0 0 15px;
  text-align: left;
}
.MMM-MagicSuperHero-container .mmm-hero-stats td {
  width: 50%;
}
.MMM-MagicSuperHero-container .mmm-hero-stats td:nth-child(even) {
  text-align: right;
}
.MMM-MagicSuperHero-container .superhero__statwrap {
  width: 100%;
  border: 1px solid #666;
}
.MMM-MagicSuperHero-container .superhero__statval {
  background: #666;
  height: 25px;
}
.MMM-MagicSuperHero-container .superhero__statval.intelligence {
  background: #bd2c33;
}
.MMM-MagicSuperHero-container .superhero__statval.strength {
  background: #af6b04;
}
.MMM-MagicSuperHero-container .superhero__statval.speed {
  background: #c7ba00;
}
.MMM-MagicSuperHero-container .superhero__statval.durability {
  background: #3da862;
}
.MMM-MagicSuperHero-container .superhero__statval.power {
  background: #2b6ab3;
}
.MMM-MagicSuperHero-container .superhero__statval.combat {
  background: #9000ad;
}

.MMM-MagicSuperHero-container .mmm-hero-app {
  margin: 0 0 15px;
  text-align: left;
}
.MMM-MagicSuperHero-container .mmm-hero-app td {
  width: 50%;
}
.MMM-MagicSuperHero-container .mmm-hero-app td:nth-child(even) {
  text-align: right;
}

.MMM-MagicSuperHero-container .mmm-hero-img-wrapper {
  text-align: center;
}
.MMM-MagicSuperHero-container .mmm-hero-img-wrapper.round {
  width: 160px;
  height: 160px;
  overflow: hidden;
  border-radius: 50%;
  margin: 0 auto;
}
.MMM-MagicSuperHero-container .mmm-hero-img-wrapper.grey .mmm-hero-img {
  filter: grayscale(1);
}
.MMM-MagicSuperHero-container .mmm-hero-img {
  max-width: 100%;
}