* {
  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 img1  imag 160px
clase img2  imag 200px
clase img3  imag 240px
clase img4  imag 280px
clase img5  imag 300px
clase img6  imag 130px
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
clase text5 texto 1.2em  padding-top nonepx*/
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 .img6 {
  border: none;
}
.img6 img {
  width: 130px;
  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;
  }



  /* 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;
  }
}