gallery/style/shiny/pkmn.css

.pkmn-type, .pkmn-move {
  --icon-size: 20px;
}

.pkmn-type {
  text-transform: uppercase;
  font-size: 80%;
  font-weight: 600;
  text-shadow: none;
  padding: 3px 4px 2px calc(var(--offset) + 0.4ex);
  background:
    var(--type-sym) left center no-repeat,
    linear-gradient(105deg,
      var(--type-col) 0,
      var(--type-col) var(--offset),
      #5d4e5d calc(var(--offset) + 1px)
    );
  --offset: calc(var(--icon-size) * 1.5);
}

.pkmn-move::before {
  content: var(--type-sym);
  display: inline-block;
  height: var(--icon-size);
  width: var(--icon-size);
  vertical-align: -15%;
  margin-right: 0.4ex;
}

.pkmn-type + .pkmn-type {
  margin-left: 0.25ex;
}

.pkmn-species {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 75%;
}

.pkmn-stats dt {
  font-size: 100%;
  font-weight: 700;
}

.pkmn-stats table {
  width: 80%;
  text-align: center;
  margin: 0;
}


.pkmn-nature-down {
  color: hsl(200deg, 80%, 80%);
}

.pkmn-nature-up {
  color: hsl(340deg, 100%, 87%);
}

th:is(.pkmn-nature-down,.pkmn-nature-up)::after {
  vertical-align: super;
  font-weight: 500;
}

th.pkmn-nature-down::after { content: '−'; }
th.pkmn-nature-up::after   { content: '+'; }


.bug {
  --type-col: #83c300;
  --type-sym: url('pkmn-types/bug.svg');
}
.dark {
  --type-col: #5b5466;
  --type-sym: url('pkmn-types/dark.svg');
}
.dragon {
  --type-col: #0a6cc2;
  --type-sym: url('pkmn-types/dragon.svg');
}
.electric {
  --type-col: #fbd100;
  --type-sym: url('pkmn-types/electric.svg');
}
.fairy  {
  --type-col: #ed9be8;
  --type-sym: url('pkmn-types/fairy.svg');
}
.fighting {
  --type-col: #e0306a;
  --type-sym: url('pkmn-types/fighting.svg');
}
.fire {
  --type-col: #ff9741;
  --type-sym: url('pkmn-types/fire.svg');
}
.flying {
  --type-col: #89aae3;
  --type-sym: url('pkmn-types/flying.svg');
}
.ghost {
  --type-col: #4c6ab2;
  --type-sym: url('pkmn-types/ghost.svg');
}
.grass {
  --type-col: #38bf4b;
  --type-sym: url('pkmn-types/grass.svg');
}
.ground {
  --type-col: #e87236;
  --type-sym: url('pkmn-types/ground.svg');
}
.ice {
  --type-col: #4cd1c0;
  --type-sym: url('pkmn-types/ice.svg');
}
.normal {
  --type-col: #919aa2;
  --type-sym: url('pkmn-types/normal.svg');
}
.poison {
  --type-col: #b567ce;
  --type-sym: url('pkmn-types/poison.svg');
}
.psychic {
  --type-col: #ff6675;
  --type-sym: url('pkmn-types/psychic.svg');
}
.rock {
  --type-col: #c8b686;
  --type-sym: url('pkmn-types/rock.svg');
}
.steel {
  --type-col: #5a8ea2;
  --type-sym: url('pkmn-types/steel.svg');
}
.water  {
  --type-col: #5090d6;
  --type-sym: url('pkmn-types/water.svg');
}

.bed  {
  /* inkscape notes:
   * 340 ÷ 360 × 255 ≃ 241
   * 0.83      × 255 ≃ 212
   * 0.68      × 255 ≃ 173
   */
  --type-col: hsl(340deg, 83%, 68%);
  --type-sym: url('pkmn-types/bed.svg');
}