@font-face {
  font-family: "PokemonRSE";
  src: url("Data/Fonts/pokemon_pixel_font.woff");
  font-weight: normal;
  font-style: normal;
}

.pokemon-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 7mm;
  height: 3.5mm;
  padding: 0;

  border: 2px solid #2b2b2b;
  border-radius: 4px;

  font-family: "PokemonRSE";
  font-size: 2mm;
  font-weight: 700;
  letter-spacing: 0.5px;

  color: #000;
  text-transform: uppercase;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.3);
}

.pokemon-type::before {
  content: "";
}

.type-Normal {
  background: linear-gradient(#b8b8a8, #8a8a6a);
  color: #000;
}
.type-Normal::before { content: "Normal"; }

.type-Fire {
  background: linear-gradient(#f8a050, #d04020);
  color: #000;
}
.type-Fire::before { content: "Fire"; }

.type-Water {
  background: linear-gradient(#90b8f8, #4068d8);
  color: #000;
}
.type-Water::before { content: "Water"; }

.type-Electric {
  background: linear-gradient(#ffe070, #d0a800);
  color: #000;
}
.type-Electric::before { content: "Thunder"; }

.type-Grass {
  background: linear-gradient(#98e070, #48a020);
  color: #000;
}
.type-Grass::before { content: "Grass"; }

.type-Ice {
  background: linear-gradient(#c8f0f0, #70b8b8);
  color: #000;
}
.type-Ice::before { content: "Ice"; }

.type-Fighting {
  background: linear-gradient(#e06050, #902020);
}
.type-Fighting::before { content: "Fight"; }

.type-Poison {
  background: linear-gradient(#c080d8, #803090);
}
.type-Poison::before { content: "Poison"; }

.type-Ground {
  background: linear-gradient(#f0d080, #c0a040);
  color: #000;
}
.type-Ground::before { content: "Ground"; }

.type-Flying {
  background: linear-gradient(#c8b8f8, #8070c8);
  color: #000;
}
.type-Flying::before { content: "Fly"; }

.type-Psychic {
  background: linear-gradient(#f898b8, #d04070);
  color: #000;
}
.type-Psychic::before { content: "Psichic"; }

.type-Bug {
  background: linear-gradient(#c8d860, #889818);
  color: #000;
}
.type-Bug::before { content: "Bug"; }

.type-Rock {
  background: linear-gradient(#d0c090, #a09050);
  color: #000;
}
.type-Rock::before { content: "Rock"; }

.type-Ghost {
  background: linear-gradient(#9078b8, #503060);
}
.type-Ghost::before { content: "Ghost"; }

.type-Dragon {
  background: linear-gradient(#9070f8, #4020c8);
}
.type-Dragon::before { content: "Dragon"; }

.type-Dark {
  background: linear-gradient(#907860, #403020);
}
.type-Dark::before { content: "Dark"; }

.type-Steel {
  background: linear-gradient(#d0d0e8, #9090a8);
  color: #000;
}
.type-Steel::before { content: "Steel"; }

.type-Fairy {
  background: linear-gradient(#f8c0d8, #d878a0);
  color: #000;
}
.type-Fairy::before { content: "Fairy"; }

/* Gen 9 */
.type-Astral {
  background: linear-gradient(#a8a8ff, #5a5ad8);
}
.type-Astral::before { content: "Astral"; }