
/* Importamos la fuente Merriweather utilizada en el enunciado */
@font-face {
  font-family: "Merriweather";
  font-style: normal;
  font-weight: 400;
  src:  local("Merriweather"), 
        local("Merriweather-Regular"), 
        url("https://fonts.gstatic.com/s/merriweather/v11/RFda8w1V0eDZheqfcyQ4EOgdm0LZdjqr5-oayXSOefg.woff2") 
        format("woff2");  
}

body { background-color:black; /* Color de fondo */ }

#caja { margin:20px; /* Damos un márgen de 20 pixels (superior, derecho, inferior, izquierdo) a toda la web */ 
        padding:10px; /* Damos un relleno de 10 pixels (superior, derecho, inferior, izquierdo) a toda la web */ 
        background-color:teal; /* Color de fondo */ 
        color: white; /* Color de la funete*/
        border-radius: 25px; /* Redondeamos los border del div (caja) */ 
      } 

#caja * { font-family: "Merriweather"; /* Para todos los elementos del div con id="caja" utilizamos la fuente Merriweather */
          line-height: 24px; /* Aplicamos una altura de linea ("interlineado") de 24px para separar el texo */
        }
#nube { padding-left: 50px; } /* Relleno izquierdo del <div> para desplazar la imagen */             

h2, h3, h4{ color: #0101DF;  /* Color de la funete*/ 
            text-decoration: underline; /* Texto subrayado*/
          } 

h2 {  color: black;  /* Color de la funete*/
      font-size: 24px; /* Aplicamos un tamaño de fuente de 24px a todas las etiquetas <h2> */
      font-weight: 700; /* Con font-weight establecemos el grosor de la fuente, 700 corresponde a un estilo "negrita" */      
    }      

h4 {  font-size: 14px; } /* Aplicamos un tamaño de fuente de 14px a todas las etiquetas <h4> */     

/* #problemas es la lista ordena <ol> */
#problemas{ width: 70%; /* Ancho de la caja <ol> */  
            text-align : justify; /* Justificamos el texto de la lista*/ 
            border:2px solid black; /* Borde de la caja de 2px de grosor, línea continua en negro */
            border-radius: 25px; /* Redondeamos los border del div (caja) */ 
            padding: 10px 20px 10px 30px; /* Relleno de la caja: 10px superior, 20px derecha, 10px inferior, 30px izquierda; */
            margin-left: 50px; /* Margen izquierdo del div */
          }

h3, p, li, code  { font-size: 16px; } /* Aplicamos un tamaño de fuente de 16px al resto de etiquetas utilizaqdas */ 

p {padding-left:20px;} /* Sangria de los párrafos */

li {margin-bottom: 15px } /* Margen inferior de los elementos de lista para separarlos un poco */

/* #codigo es un <div> con este id que contiene el ejemplo de HTML*/
#codigo{background-color:#D0F5A9; /* Color de fondo en hexadecimal*/
        color: black; /* Color de la funete*/
        width: 600px; /* Ancho de la caja <div> */
        margin-left: 5px; /* Margen derecho de 5px */
        padding-left: 10px; /* Relleno derecho de 5px */
        border-radius: 25px; /* Redondeamos los border del div (caja) */ 
  }
