/*Fuentes*/

@import url("https://fonts.googleapis.com/css2?family=Lobster+Two:wght@700&family=Roboto:ital,wght@0,100;0,300;0,700;1,100&family=Rock+Salt&display=swap");

/*html * {
  background-color: rgba(0, 0, 0, 0.767);
}*/
html * {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
header {
  box-sizing: border-box;
}
header {
  background-image: url(https://m.media-amazon.com/images/S/stores-image-uploads-na-prod/8/AmazonStores/A1AM78C64UM0Y8/88a9732d54ce1de3a48e9c09d2f58fed.w3000.h600._CR0%2C0%2C3000%2C600_SX1500_.jpg);
  background-color: rgb(152, 189, 185);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  width: 100rem;
  height: 15rem;
  flex-shrink: 50%;
  padding-top: 0px;
  position: relative;
  max-width: 100%;
  max-height: 50%;
}

h1 * {
  box-sizing: border-boxf;
  margin-top: 0px;
  margin-bottom: 0px;
  top: 10px;
}

h1 {
  color: #3d00ff;
  text-align: center;
  font: 600 50px "Rock Salt", cursive;
  position: relative;
  flex-shrink: 100%;
}

button,
button * {
  padding: 1rem;
  border-radius: 8rem;
  border: none;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #57dd36;
  color: #ffffff;
  cursor: pointer;
  transition: box-shadow 0.3s;

  .button:hover {
    background-color: #219804;
    box-shadow: 0 0 10px rgba(48, 241, 23, 0.711);
  }
}

@media (max-width: 768px) {
  .random-facts {
    position: absolute;
    right: 0;
    /*width: 13%;
    height: 3em;*/
    font-size: 14px;
    padding: 5px 10px;
  }
}

select,
select * {
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 8rem;
  border-color: #57dd36;
  padding: 0.8rem;
}

ul {
  padding: 0 10px 0 10px;
  display: flex;
  justify-content: center; /* Alineación horizontal al centro */
  align-items: flex-start; /* Alineación vertical al inicio */
  gap: 25px; /* Espacio entre elementos secundarios */
  flex-wrap: wrap;
}

.personaje {
  border: 1px solid #ccc;
  border-radius: 5px;
}

.personaje {
display:flex;
flex-direction:column;
justify-content:space-between;
width: calc(20% - 5px); /* Para dividir en 3 columnas con un espacio de 30px entre ellas */
border: 1px solid lightgray;
box-shadow: 2px 2px 8px 4px #d3d3d3d1;
border-radius:15px;
font-family: sans-serif;
text-overflow: ellipsis;
align-self: stretch;
}

.personaje img {
  max-width: 100%; /* Hace que la imagen tenga un ancho máximo del 100% del contenedor */
  height: auto;
  width: auto; /* Asegura que la altura se ajuste automáticamente para mantener la proporción */
}

.personaje h2 {
  text-align: center;
  font-size: 1 em;
  padding: 10px 10px 0 10px;
}

.personaje h3 {
  text-align: center;
  font-size: 1 em;
  padding: 5px;
}

.info {
  display: flex;
  text-align: center;
  justify-content: space-around;
  font-size: 12px;
  padding: 10px;
  flex-flow: row;
  background-color: rgb(240, 248, 247);
}

footer {
  background-color: rgb(246, 250, 250);
  font-size: 10px;
}

/* Cuando la pantalla es menor a 900px  (tablets y teléfonos inteligentes)*/
@media (max-width : 768px) {

  .personaje {
    width: 40% !important;
  }     
}

@media (max-width : 480px) {
    .personaje {
      width: 100% !important;
  } 
}