/*Defino el tipo de fuente y su tamaño*/
body {
  font-family: Verdana;
  font-size:12px;
}

/*Establezco las propiedades necesarias para mi imagen, las dos primeras lineas es para poder centrar la imagen 
  luego aplico un borde a la imagen y las ultimas dos lineas son para al verlas en dispositivos pequeños se acomode a la pantalla
*/
img{
  display:block;
  margin:auto;
  border:1px solid #A2A2A2;
  max-width: 100%;
  height: auto;
}

/*Para cada una de los items de mi lista que en este caso seran las imagenes defino un recuadro con un border, le pongo un color, agrego un padding y un padding-bottom para agregar un poco de espacio a la parte de abajo, un margin para el recuadro, un color y que la sea ajustable al tamaño del navegador*/
li{
  border:1px solid #A2A2A2;
  background-color:#F1F1F1;
  padding:8px;
  padding-bottom:18px;
  margin:5px;
  margin-top:17px;
  color:#0150c7;
  overflow:auto;
  }

/*Defino un padding-left ya que los recuadros me quedan mal centrados*/  
ul{
  padding-left:5px;
  }

/*Hago que mi titulo se pose sobre la parte central del navegador y a su vez lo utilizo para el footer*/
.titulo{
  text-align: center;
  }