:root {
  --normal: #a8a878;
  --fire: #f08030;
  --water: #6890f0;
  --electric: #f8d030;
  --grass: #78c850;
  --ice: #98d8d8;
  --fighting: #c03028;
  --poison: #a040a0;
  --ground: #e0c068;
  --flying: #a890f0;
  --psychic: #f85888;
  --bug: #a8b820;
  --rock: #b8a038;
  --ghost: #705898;
  --dragon: #7038f8;
  --dark: #705848;
  --steel: #b8b8d0;
  --fairy: #ee99ac;
  --status: #d6d6d6;
  --physical: #e87257;
  --special: #8284ec;
}
body {
  background-color: #222;
  color: #bbb;
}
ul {
  list-style: none;
  margin-top: 0;
  padding-left: 0;
}
.d-flex {
  display: flex;
}
.space-between {
  justify-content: space-between;
}
.pointer {
  cursor: pointer;
}
.ml-4 {
  margin-left: 4px;
}
.mt-8 {
  margin-top: 8px;
}
.badge {
  padding: 4px 8px;
  border-radius: 16px;
}
#navbar {
  width: 100%;
  height: 48px;
  align-items: center;
}
#pokemon-list {
  position: absolute;
  top: 48px;
  right: 0;
  height: calc(100vh - 144px);
  background: #ddd;
  color: #222;
  padding: 48px;
  overflow: auto;
  width: 300px;
}
.pokemon-list-item {
  padding: 6px 0;
}
#selected-pokemons {
  height: calc(100vh - 88px);
  width: 100vw;
  overflow: auto;
}
#selected-pokemons-box {
  min-width: min-content;
}
.pokemon-card {
  background: #bbb;
  color: #222;
  padding: 24px 36px;
  margin: 12px;
  border-radius: 8px;
  width: 250px;
  overflow: auto;
}
.pokemon-card > :first-child > button {
  height: 36px;
  padding: 0 16px;
  cursor: pointer;
  border-radius: 24px;
  border: 0;
}
.pokemon-card-abilities > li {
  padding: 2px 0;
}
.moves-list > li {
  padding: 6px 0;
}
.normal {
  background-color: var(--normal);
}
.fire {
  background-color: var(--fire);
}
.grass {
  background-color: var(--grass);
}
.ice {
  background-color: var(--ice);
}
.fighting {
  background-color: var(--fighting);
}
.poison {
  background-color: var(--poison);
}
.ground {
  background-color: var(--ground);
}
.flying {
  background-color: var(--flying);
}
.psychic {
  background-color: var(--psychic);
}
.bug {
  background-color: var(--bug);
}
.rock {
  background-color: var(--rock);
}
.ghost {
  background-color: var(--ghost);
}
.dragon {
  background-color: var(--dragon);
}
.dark {
  background-color: var(--dark);
}
.steel {
  background-color: var(--steel);
}
.fairy {
  background-color: var(--fairy);
}
.water {
  background-color: var(--water);
}
.electric {
  background-color: var(--electric);
}
.status {
  background-color: var(--status);
}
.physical {
  background-color: var(--physical);
}
.special {
  background-color: var(--special);
}