html { font-size: 16px; }
body { background-color: #F4F4F4; color: black; font-color: black; font-family: 'Arial'; }
a:link { color: #000000; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; }
a:hover { color: #000000; text-decoration: underline; }
a:active { color: #000000; text-decoration: underline; }
a:focus { color: #000000; text-decoration: underline; }

/* img.icono { height: 2.8vmin; max-width: 100%; } */
/* img.icono { height: auto; max-width: 100%; } */
img.icono { width: auto; max-height: 100%; }
img.icono1 { max-width: 24px; height: auto; }
img.normal { width: 100%; max-width: 100%; height: auto; }

ul.cero {padding-left: 2ch; }
ol.cerocero {padding-left: 2ch; }
ul.uno {list-style-type: square; }

p.azul {font-weight: bold; color: blue;} /* skyblue */
p.imagen {color: Green; font-weight: bold; display: inline;}
/* p.gold {color: #E6A420; display: inline;} */
p.gold {color: #E6A420; display: inline;} 
p.blanco {color: #FFFFFF; display: inline;}
div.azul {background-color: #0000A0;
padding-top:1em; padding-bottom: 1em; padding-left:1em; padding-right:1em;}

@media (max-width: 475px) {   /* dispositivos pequeños (móviles) */
  a, p, table, tr, td, ul, ol, li, h1, h2, h3, h4, h5, h6, div { font-size: 1.25rem; }
  input, textarea { font-family: monospace; font-size: 1.2rem; width: 300px; }
  .boton { cursor: pointer; width: 10%; color: yellow; background-color: yellow; }
}
@media (min-width: 475px) {   /* dispositivos más grandes (tabletas y ordenadores) */
  a, p, table, tr, td, ul, ol, li, h1, h2, h3, h4, h5, h6, div { font-size: 1rem; }
  input, textarea { font-family: monospace; font-size: 1rem; width: 600px; }
  .boton { cursor: pointer; width: 10%; color: yellow; background-color: yellow; }
}