items.css

* {
  box-sizing: border-box;
  /* border: 1px solid red; */

}

#main {
  display: grid;
  grid-gap: 2.5em;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-column: 10em;

}

.items {
  padding-left: 0.3em;
  padding-right: 0.3em;
}


.marco{
  border: 1em solid yellow;
  border-radius: 0.8em;
  padding: 3px;
  padding-left: 0.5em;
  padding-right: 0.5em;
  width: 18em;
}
.fantasma {
   /* background-color: mediumpurple; */
   /* background: repeating-linear-gradient(-45deg, mediumpurple, purple 5px, white 5px, mediumpurple 10px); */
     background: linear-gradient(to bottom, purple, plum 10%, mediumpurple, purple, mediumpurple, rebeccapurple, mediumpurple, plum, white, mediumpurple, mediumpurple, purple);
  /* background-image: repeating-linear-gradient(90deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
  repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
        rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
        rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
        rgba(255, 206, 0, 0.25) 166px),
  repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
        rgba(143, 77, 63, 0.25) 10px),
  repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
        rgba(143, 77, 63, 0.25) 10px); */
}
.titulo {
  position: relative;
  top: 0.8em;
  left: 3.3em;
  margin-bottom: 0.5em;
  border-top: 1px solid yellow;
  width: 11.7em;
  height: 2em;
}

.pretitulo {
  display: flex;
  position: absolute;
  top: -1.2em;
}
.evolucion {
  font-size: 8px;
  font-weight: bold;
  width: auto;
  white-space: pre;
}
.salto0{
  width: 12px;
}
.posicion {
  margin-top: 3em;
  font-size: 4px;
  height: auto;
  white-space: pre;
}

.tipo0{
  position: relative;
  padding: 0;
  left: 7.5em;
  width: 4em;
}
.tipo0 h5 {
  position: relative;
  width: auto;
  margin: 0;
  width: 4em;
}
.nombre{
  position: absolute;
  margin: 0;
  top: 0;
}
.tipo1 {
  position: relative;
  width: 1em;
  height: 1em;
  float: right;
  top: -1em;
  border-radius: 6em;
  box-shadow: 0 0 1px;
  }

.pre {
  position: absolute;
  left: -0.5em;
  top: -2em;
  width: 3em;
  height: 3em;
  border: 2px solid gold;
  z-index: 2;
  background-color: darkgrey;
}

.foto{
  position: absolute;
  margin-left: 0.5em;
  margin-right: 0.5em;
  top: 0;
  position: relative;
  text-align: center;
  margin-top: 0;
  width: 14em;
  height: 10em;
}
.pokemon{
  position: relative;
  width: 13.5em;
  height: 9.5em;
  border: 5px solid gold;
  box-shadow: 3px 3px 11px black;
}


.texto {
  position: relative;
  width: 15em;

}

.numero {
  background: linear-gradient(to right, goldenrod, gold, gold, LightGoldenRodYellow, gold, goldenrod);
  border: 1.5px solid gold;
  border-radius: 1px;
  font-size: 7.5px;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 3em;
  margin-right: 3em;
  text-align: center;
}

.HAB1 h5{
  margin-top: 0.5em;
  position: relative;
  text-align: center;
  width: auto;
  height: auto;
  padding-bottom: 0;
  margin-bottom: 0;
}
.HAB1 p{
  position: relative;
  font-size: 12px;
  border-bottom: 1px solid black;
  width: auto;
  height: auto;
  padding-top: 0;
  margin-top: 0.1em;
}
.HAB2 h5{
  position: relative;
  text-align: center;
  width: auto;
  height: auto;
  padding-bottom: 0;
  margin-bottom: 0;
  margin-top: 0;
}
.HAB2 p{
  position: relative;
  font-size: 12px;

  width: auto;
  height: auto;
  padding-bottom: 0;
  margin-top: 0.1em;
  margin-bottom: 0.5em;
}

.tipoA {
  position: absolute;
  width: 0.8em;
  height: 0.8em;
  float: left;
  top: 1.2em;
  border-radius: 6em;
  box-shadow: 0 0 1px;
  visibility: visible;
}

.tipoA-1 {
  position: absolute;
  width: 0.8em;
  height: 0.8em;
  float: left;
  top: 1.2em;
  left: 1em;
  border-radius: 6em;
  box-shadow: 0 0 1px;
  visibility: hidden;
}

.tipoB {
  position: absolute;
  width: 0.8em;
  height: 0.8em;
  float: left;
  top: 5em;
  border-radius: 6em;
  box-shadow: 0 0 1px;
  visibility: visible;
}

.tipoB-1 {
  position: absolute;
  width: 0.8em;
  height: 0.8em;
  float: left;
  top: 5em;
  left: 1em;
  border-radius: 6em;
  box-shadow: 0 0 1px;
  visibility: visible;
}

.coste2 {
  float: right;
  position: absolute;
  margin-top: 0;
  margin-bottom: 0;
  top: -1.3em;
}

.coste1 {

  float: right;
  position: absolute;
  margin-top: 0;
  margin-bottom: 0;
  top: -1.8em;
}

.info {
  margin-bottom: 5px;
}

.info1 {
  position: relative;
  display: flex;

}

.textop {

  font-size: 6px;
  font-weight: bold;
}

.Linea1 {
  display: flex;
  width: auto;
  height: 1.3em;
  border-bottom: 1px solid black;
  border-top: 3px solid black;
}

.Linea1 p{
  width: auto;
}

.Linea1 img {
  margin-top: 3px;
  margin-bottom: 1px;
  margin-left: 1px;
  width: 0.8em;
  height: 0.8em;
  border-radius: 6em;
  box-shadow: 0 0 1px;
}
.Linea1 h6 {
  margin-top: 3px;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  width: auto;
}

.salto {
  width: 3px;
  height: 1.3em;
  border-bottom: 1px solid black;
  border-top: 3px solid black;
}

.descripcion {
  position: absolute;
  padding: 2px;
  font-size: 5px;
  border: 1.5px solid yellow;
  height: 7.3em;
  width: 20em;
  right: 0;
}

.Linea2 {

  border-bottom: 3px solid black;
  display: flex;
}
.Linea2 p{
  width: auto;
}

.Linea2 img {
  margin-top: 3px;
  margin-bottom: 1px;
  margin-left: 1px;
  width: 0.8em;
  height: 0.8em;
  border-radius: 6em;
  box-shadow: 0 0 1px;
}

.salto1 {
  width: 3px;
}