/* ====== GLOBAL COLORS ====== */
:root {
  /* Type Colors */
  --type-electric: #FFD43B;
  --type-electric-border: #C69C00;
  --type-psychic: #D16BA5;
  --type-psychic-border: #8B3A6A;

  /* Backgrounds */
  --body-bg: #FFF9E6;
  --text-color: #222;
  --border-radius: 12px;
}

/* ====== PAGE STRUCTURE ====== */
body {
  font-family: "Segoe UI", sans-serif;
  background-color: var(--body-bg);
  color: var(--text-color);
  margin: 0;
  padding: 0.75rem;
}

/* ====== HEADER ====== */
.pokemon-family {
  text-align: center;
  /*padding: 1.5rem;*/
  border: 10px solid var(--type-electric-border);
  background-color: var(--type-electric);
  border-radius: var(--border-radius);
  color: #333;
}

/* ====== GRID LAYOUT FOR POKÉMON ENTRIES ====== */
.pokemon-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* On wider screens, arrange into 2x2 */
@media (min-width: 900px) {
  body {
    font-size: 16px;
  }
  .pokemon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ====== POKÉMON BLOCKS ====== */
.pokemon-entry {
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: var(--border-radius);
  background-color: var(--type-electric);
  border: 5px solid var(--type-electric-border);
}

/* Type variants */
.type-electric {
  background-color: var(--type-electric);
  border-color: var(--type-electric-border);
}

.type-psychic {
  background-color: var(--type-psychic);
  border-color: var(--type-psychic-border);
}

/* Dual-type blend (Electric + Psychic example) */
.type-electric-psychic {
  background: linear-gradient(135deg, var(--type-electric) 50%, var(--type-psychic) 50%);
  border: 5px solid var(--type-psychic-border);
}

/* ====== FAMILY SECTION ====== */
.pokemon-family {
  background-color: #FFF3C2;
  border: 3px solid #C69C00;
  border-radius: var(--border-radius);
  padding: 1rem 1.5rem;
  margin-top: 2rem;
}

/* ====== POKEDEX ENTRIES ====== */
.pokedex-entries {
  margin-top: 2rem;
  background-color: #FFFBE6;
  border: 3px solid #D1B000;
  border-radius: var(--border-radius);
  padding: 1rem 1.5rem;
}

.pokedex-entries article {
  margin-bottom: 1rem;
}

/* ====== FOOTER ====== */
footer {
  text-align: center;
  font-size: 0.9rem;
  color: #666;
  margin-top: 3rem;
}