* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: white;
}

@font-face {
  font-family: "Chalkduster";
  src: url(fuentes/amy/amyshandwriting.ttf);
}

header {
  width: 100%;
}

#esp {
  width: 80px;
  height: 40px;
}

#logo {
  float: left;
  margin: 0px 2px 0px 30px;
}

nav {
  float: left;
  width: 250px;
  height: 50px;
  margin: 0px 0px 0px 10px;
}

#boton a {
  color: blue;
  text-decoration: none;
  font-family: Comic Sans MS;
  font-size: 18px;
}

#titulos {
  width: 92%;
  margin: auto;
  padding: 20px 0px;
  text-align: center;
  color: #5e47d1;
  font-family: chalkduster;
}

/*  Fin header*/
  


/* clase columnas para los cuentos */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 265px;
  gap: 1em;
  margin: 0em 1em;
}

.grid div {
  border: 3px solid rgb(92, 88, 88);
  text-align: center;
}
/* section img espacion entre borde y img*/
section img {
  padding-top: 20px;
}
.grid a {
  text-decoration: none;
  color: #5e47d1;
}
/* Nuevo sistema de clases, para bordes con cinco tamaños
clase img0  imag 140px
clase img1  imag 160px
clase img2  imag 200px
clase img3  imag 240px
clase img4  imag 280px
clase img5  imag 300px
clase text1 texto 1.2em  padding-top 10px
clase text2 texto 1.2em  padding-top 15px
clase text3 texto 1.2em  padding-top 20px
clase text4 texto 1.2em  padding-top 24px */
div .img0 {
  border: none;
}
.img0 img {
  width: 140px;
  border: none;
}
div .img1 {
  border: none;
}
.img1 img {
  width: 180px;
  border: none;
}
div .img2 {
  border: none;
}
.img2 img {
  width: 200px;
  border: none;
}
div .img3 {
  border: none;
}
.img3 img {
  width: 240px;
  border: none;
}
div .img4 {
  border: none;
}
.img4 img {
  width: 280px;
  border: none;
}
div .img5 {
  border: none;
}
.img5 img {
  width: 300px;
  border: none;
}
div .text1 {
  border: none;
  font-size: 1.2em;
  font-family: chalkduster;
  padding-top: 10px;
}
div .text2 {
  border: none;
  font-size: 1.2em;
  font-family: chalkduster;
  padding-top: 15px;
}
div .text3 {
  border: none;
  font-size: 1.2em;
  font-family: chalkduster;
  padding-top: 20px;
}
div .text4 {
  border: none;
  font-size: 1.2em;
  font-family: chalkduster;
  padding-top: 24px;
}
div .text5 {
  border: none;
  font-size: 1.2em;
  font-family: chalkduster;
  padding-top: none;
}

/* Fin Plantillas img y text */

/*  footer */ 
#space {
  height: 67px;
}

.azul {
    width: 200px;
  height: 100px;
  margin: 0px 50px;
  padding-top: 50px;
}
.lazul a {
    color: blue; 
    text-decoration: none;
}
footer {
    width: 100%;
    height: 50px;
    padding-top: 30px;
    font-size: 18px;
    background-color: #e14372;
  }
  footer div {
    float: left;
    width: 154px;
    height: 1em;
    margin-left: 15px;
    opacity: .6;
}
#AD {
  padding-right: 10%;
}
#DR {
  float: right;
  padding-right: 2%;
  width: 220px;
  text-align: center;
}
  .clearfloat {
    clear: both;
  }

  /*  Responsible */

@media (max-width: 480px) {

  body {
    background-color: white;
  }

  header {
    width: 100%;
    height: 200px;
  }

  #logo {
    margin: 8px;
  }

  #logo img {
    width: 60px;
  }

  #boton {
    padding-top: 15px;
  }

  /* fin header responsible */

  .grid {
    display: grid;
    grid-template-columns: 100%;
    grid-auto-rows: auto;
    gap: 1em;
  }

  #uno img {
    width: 210px;
  }

  #dos img {
    width: 120px;
  }

  #tres img {
    width: 180px;
  }

  #cuatro img {
    width: 220px;
  }

  #cinco img {
    width: 220px;
  }

  #seis img {
    width: 220px;
  }

  #siete img {
    width: 220px;
  }

  #ocho img {
    width: 220px;
  }



  /* pies */
  .azul {
    width: 200px;
    margin: 0px;
    padding-left: 20px;
  }

  .lazul a {
    color: blue;
    text-decoration: none;
    text-align: center;
  }

  footer {
    width: auto;
    font-size: 16px;
    padding: 0px;
    text-align: center;
  }

  footer div {
    width: auto;
    padding: 0.2em;
  }

  #DR {
    width: max-content;
  }
}