/* ---------------------------- Globals ----------------------------- */
.d_none {
   display: none;
}

#content {
   display: flex;
   flex-wrap: wrap;
   align-content: center;
   justify-content: center;
   margin-bottom: 50px;
}

.error-Message {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   color: red;
   background-color: black;
   border-radius: 40px;
   padding: 20px;
}

.mini-card-body {
   height: 300px;
   width: 220px;
   background-color: #0d3240;
   border: 1px solid #000;
   border-radius: 20px;
   color: #fefefe;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   margin: 20px;
}

.mini-card-body:hover {
   cursor: zoom-in;
   transform: scale(1.2); /* Vergrößert das Element um 20% */
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Optionale Schatteneffekte für den Hover-Effekt */
}

/* ---------------------------- Card Body Top ----------------------------- */
.mini-card-body-top {
   height: 35px;
   padding: 10px;
   display: flex;
   justify-content: space-around;
}

/* ---------------------------- Card Body Img ----------------------------- */
.mini-card-body-img img {
   width: 100%;
}

/* ---------------------------- Card Body Bottom ----------------------------- */
.mini-card-body-bottom {
   height: 35px;
   display: flex;
   justify-content: center;
   gap: 20px;
}

.mini-card-body-bottom img {
   height: 30px;
}

.pokemon-image-shadow {
  /*
   * Syntax: filter: drop-shadow(x-offset y-offset blur-radius color);
   * x-offset: Verschiebung nach rechts (negativ für links)
   * y-offset: Verschiebung nach unten (negativ für oben)
   * blur-radius: Wie stark der Schatten weichgezeichnet wird.
   * color: Die Farbe des Schattens. rgba() ist ideal für halbtransparente Schatten.
   */
  filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 0.5));

  /* Optional: Eine sanfte Animation hinzufügen, wenn man über das Bild fährt */
  transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
}

/* Optional: Den Schatten und die Größe beim Hovern verstärken für einen coolen Effekt */
.pokemon-image-shadow:hover {
  transform: scale(1.1);
  filter: drop-shadow(6px 6px 10px rgba(0, 0, 0, 0.6));
}