* {
  margin: 0px;
  padding: 0px;
}
.containers {
  display: grid;
}
.header {
  grid-area: header;
  display: flex;
  background-color: blue;
  padding: 0px 60px;
  text-align: center;
  font-size: small;
  font-family: "MedievalSharp", cursive;
  font-weight: 400;
  font-style: normal;
  color: white;
}
.nav {
  grid-area: nav;
  display: flex;
  flex-direction: row;
  border: 1px solid lightgrey;
  background-color: mintcream;
  justify-content: space-between;
}
.filtro1 {
  display: flex;
}
.filtro2 {
  display: flex;
  flex-direction: row;
}
.navbar {
  display: flex;
  flex-direction: column;
  list-style: none;
  justify-content: start;
  background-color: lightgray;
}
.pociones {
  margin-top: 30px;
}
.navbar li :hover {
  color: blue;
}
.main {
  grid-area: main;
  justify-items: center;
}
.box {
  display: grid;
  justify-items: center;
}
.hijo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid;
  width: 15rem;
  height: 25rem;
  transition: all 1s;
  margin-top: 15px;
}
.hijo:hover {
  width: 20rem;
  height: 30rem;
  box-shadow: 10px 10px 15px black;
}
.hijo img {
  width: 12rem;
  height: 100%;
}
.hijo button {
  border-radius: 4px;
  background-color: goldenrod;
  font-weight: bold;
  transition: all 0.2s ease-in;
}
.hijo button:hover {
  background-color: #009d71;
}

h4 {
  font-family: "MedievalSharp", cursive;
  font-style: normal;
  font-weight: bold;
}
.footer {
  grid-area: footer;
  background-color: #c4a484;
  text-align: center;
  width: 100%;
  bottom: 0;
}

.cls-alinear-numeracion {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0px;
}
.cls-pagination {
  display: inline-block;
  padding: 0px;
  margin: 0px;
}
.cls-pagination li {
  display: inline;
  border: 1px solid;
  border-radius: 10%;
  background-color: lightslategray;
  padding: 5px;
}
/* Desde aqui parte el CSS de pociones*/

.pocion {
  transition: all 1s;
  filter: grayscale(1);
}
.pocion:hover {
  filter: grayscale(0);
}

.extra {
  animation-name: extra; /* Nombere de la animacion*/
  animation-duration: 3s; /* duracion de la animacion*/
  animation-iteration-count: infinite; /*repeticion*/
  animation-direction: alternate; /*cuando comienza y cuando termina 0%-100% y regresa con animación*/
  animation-fill-mode: none; /* que funciona antes y despues de la animación */
  animation-timing-function: linear;
}
.extra:hover {
  animation-play-state: paused;
}

@keyframes extra {
  0% {
    color: black;
    transform: translateX(0);
  }
  20% {
    color: red;
    transform: translateX(150px);
  }
  50% {
    color: green;
    transform: translateX(300px);
  }
  80% {
    color: purple;
    transform: translateX(450px);
  }
  100% {
    color: blue;
    transform: translateX(600px);
  }
}

@media (max-width: 576px) {
  /* Media Querie de Teléfono*/
  .containers {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
    background-color: azure;
  }
  .header {
    justify-content: space-evenly;
  }
  .logo {
    font-size: 2rem;
  }
  .borger {
    display: flex;
    font-size: 2rem;
  }
  .nav {
    flex-direction: column;
    justify-items: center;
    align-items: center;
  }
  .navbar {
    display: none;
  }
  .main {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .box {
    justify-items: center;
    gap: 10px;
  }
  @keyframes extra {
    0% {
      color: black;
    }
    20% {
      color: red;
    }
    50% {
      color: green;
    }
    80% {
      color: purple;
    }
    100% {
      color: blue;
    }
  }
}

@media (min-width: 992px) {
  /* Media Querie de PC*/
  .containers {
    display: grid;
    grid-template-areas:
      "header header header"
      "nav nav nav"
      "navbar main main"
      "footer footer footer";
  }
  .logo {
    display: flex;
    font-size: 1.5rem;
  }
  .borger {
    display: none;
  }
  .box {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 15px;
  }
}

@media (min-width: 576px) and (max-width: 991px) {
  /* Media Querie de Tablet*/
  .containers {
    display: grid;
    grid-template-areas:
      "header header"
      "nav nav"
      "navbar main"
      "footer footer";
  }
  .logo {
    display: flex;
    font-size: 1.5rem;
  }
  .borger {
    display: none;
  }
  .nav {
    flex-direction: column;
    justify-items: center;
    align-items: center;
  }
  .box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  @keyframes extra {
    0% {
      color: black;
    }
    20% {
      color: red;
    }
    50% {
      color: green;
    }
    80% {
      color: purple;
    }
    100% {
      color: blue;
    }
  }
}