@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Press+Start+2P&display=swap');

body {
  font-family: 'Lato', sans-serif;
  background-color: #f6f1eb;
}

.press-start {
  font-family: 'Press Start 2P', cursive;
}

.pokeball {
  width: 50px;
  height: 50px;
  background: linear-gradient(to bottom, #ff0000 0%, #ff0000 48%, #000 48%, #000 52%, white 52%, white 100%);
  border-radius: 50%;
  position: relative;
  border: 2px solid #000;
  animation: shake 2s infinite;
}
.pokeball:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #000;
  box-shadow: 0 0 0 4px white;
}

@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  5% { transform: rotate(5deg); }
  10% { transform: rotate(-5deg); }
  15% { transform: rotate(5deg); }
  20% { transform: rotate(0deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.type-badge {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  color: white;
  text-transform: capitalize;
}

.type-grass    { background-color: #9da477; }
.type-fire     { background-color: #eac6c4; }
.type-water    { background-color: #83b9ff; }
.type-electric { background-color: #f8d030; }
.type-normal   { background-color: #a8a878; }
.type-psychic  { background-color: #f85888; }
.type-bug      { background-color: #a8b820; }
.type-dark     { background-color: #705848; }
.type-dragon   { background-color: #7038f8; }
.type-fairy    { background-color: #ee99ee; }
.type-fighting { background-color: #c03028; }
.type-flying   { background-color: #a890f0; }
.type-ghost    { background-color: #705898; }
.type-ground   { background-color: #e0c068; }
.type-ice      { background-color: #98d8d8; }
.type-poison   { background-color: #a040a0; }
.type-rock     { background-color: #b8a038; }
.type-steel    { background-color: #b8b8d0; }