* {
  font-family: "Titillium Web";
  margin: 0;
}

body {
  background-color: rgb(59, 76, 202);
}
header {
  background-image: url("imagenes/headerImage.jpg");
  height: 7em;
  display: flex;
  align-items: center;
  justify-content: center;
}

main,
header {
  margin: 0 0 1% 0;
  text-align: center;
}

h1 {
  background-color: rgba(59, 76, 202, 0.7);
  height: 65px;
  width: 100%;
  font-size: 250%;
}
h2 {
  width: 100%;
  text-align: center;
}

.pokemon-h2 {
  height: 35px;
}

h2,
label {
  margin: 1.5% 1%;
}

h1,
h2 {
  color: #ffde00;
}
#controls {
  margin: 1.5% 1% 0 1%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

button [data-testid="button-clear"] {
  width: 100px;
}

input[type="text"] {
  background-color: #d9d9d9;
  border: 2px solid #cc0000;
  border-radius: 10px;
  margin: 0, 5%;
}
.color {
  color: #17ef53;
  font-size: 130%;
}
label {
  color: #ffffff;
}

select {
  border-radius: 10px;
  border: 2px solid #cc0000;
  background-color: #d9d9d9;
  margin:1%;
  height: 30px;
}

button {
  border-radius: 10px;
  border: 2px solid #cc0000;
  background-color: #d9d9d9;
}

#compute-stats-result {
  font-size: 100%;
  color: black;
  background-color: #17ef53;
}

section{
  overflow-x: hidden;
  }

ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
}

.cards {
  width: 548px;
  height: 308px;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 14% 10% 14% 14% 20% 15% 10%;
  border-radius: 20px;
  background-image: url("imagenes/Fondo\ tarjeta\ panorámica.jpg");
  background-size: cover;
  margin: 1%;
}

img[itemprop="img-pokemon"] {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
  padding: 7%;
}

dd[itemprop="name"] {
  text-align: center;
  font-size: 200%;
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 1;
}

dd[itemprop="name"]:first-letter {
  text-transform: uppercase;
}

dd[itemprop="type"] {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 2;
  font-size: 150%;
}

.type-image-0 {
  grid-column-start: 3;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 2;
  justify-self: end;
  height: 120%;
  padding: 0;
}

.type-image-1 {
  grid-column-start: 4;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 2;
  justify-self: start;
  height: 120%;
  padding: 0;
}

dd[itemprop="name-region"] {
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 3;
  font-size: 150%;
}

dd[class="resistant-tag"]{
  margin: 2%;
  padding: 5%;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 4;
  grid-row-end: 5;
  font-size: 110%;
}

dd[itemprop="resistant"] {
  margin: 2%;
  padding: 5%;
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 5;
  font-size: 110%;
}

dd[itemprop="weaknesses"] {
  margin: 2%;
  padding: 5%;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 6;
  grid-row-end: 6;
  font-size: 110%;
}

dd[itemprop="evolucion-1"] {
  grid-column-start: 3;
  grid-column-end: 3;
  grid-row-start: 5;
  grid-row-end: 5;
  font-size: 110%;
}

dd[itemprop="evolucion-2"] {
  grid-column-start: 4;
  grid-column-end: 4;
  grid-row-start: 5;
  grid-row-end: 5;
  font-size: 110%;
}

.candy1 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 6;
  grid-row-end: 6;
  height: 50%;
  justify-self: end;
}

.candy2 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 6;
  grid-row-end: 6;
  height: 50%;
  justify-self: end;
}

dd[itemprop="candy-cost-1"] {
  grid-column-start: 3;
  grid-column-end: 3;
  grid-row-start: 6;
  grid-row-end: 6;
  font-size: 100%;
}

dd[itemprop="candy-cost-2"] {
  grid-column-start: 4;
  grid-column-end: 4;
  grid-row-start: 6;
  grid-row-end: 6;
  font-size: 100%;
}

dd[itemprop="spawn-chance"] {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 7;
  grid-row-end: 7;
  font-size: 110%;
  text-align: left;
}

.message {
  color: #17ef53;
  font-size: 150%;
  margin: 0 0 20% 0;
}

footer {
  text-align: center;
  font-size: 120%;
  color: #d9d9d9;
}

@media (max-width: 480px) {
  .cards {
    width: 100%;
    margin: 1%;
  }

  dd[itemprop="type"] {
    font-size: 140%;
  }

  img[itemprop="img-pokemon"]{
    justify-self: center;
    height: 95px;
  }

  h1{
    font-size: 210%;
  }

  .type-image-0 {
    grid-column-start: 4;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 2;
    justify-self: start;
    height: 100%;
  }
  
  .type-image-1 {
    grid-column-start: 4;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 2;
    justify-self: center;
    height: 100%;
  }
}