*{
 box-sizing: border-box;
}
body{
  font-family:'lobster',cursive;
}
/*estilo del encabezado o header*/
header{
  background-color:#666;
  padding: 30px
  text-align: center;
  font-size: 35px;
  color: white;
}
/*cree dos climnas o cjas que floten una al lado de la otra*/
nav{
  float:left;
  width:30%
  background: #ccc;
  padding: 20px;
}
/*estilo de la lista dentro del menu*/
nav ul{
 list-style-type: none;
 padding: 0;
}
article{
 float: left;
 padding: 20px;
 width: 70%;
 background-color: #f1f1f1;
}
/* limpiar float despues de la columna*/
section::after{
 content:"";
 display:table;
 clear: both;
}
/*estilo del pie de pagina o footer*/
footer{
 background-color: #777;
 padding: 10px;
 text-aling: center;
 color: white;
}
h1{
color:blue;
font-family: 'Nunito', sans-serif;
text-Arial:center;
size:48px;

}

p{
color:purple;
font-family: 'Rubik', sans-serif;
}
form{
/* centrar el formulario en la pagina*/
margin:1.5 auto;
width: 800px;
/*esquema del formulario*/
padding: 2em; 
border: 1,5px solid #ccc;
border-radius:1em;
ul{
 list-style:none;
 padding: 1;
 margin: 1;
}
form li+li{
 margin-top: 1em
}
label{
/* tamaņo y alineacion uniforme*/
display: inline-block
width; 325px;
text-arial:right;
}
input,
textarea{
 /*para asegurars de que todos los campos de texto tiene la misma configuracion de letra
   por defecto, las areas de texto tiene un tipo de letra monoespaciada*/
font: 1em sans- serif;
/* tamaņo uniforme del campo de texto*/
width: 300px;
box-sizing: border-box;
/* hacer conicidir  los bordes del campo del formulario*/
border: 1px solid #000;
}
input:focus,
textarea:focus
/* destacado adicional para elementos que tiene el cursor*/
border-color: red;
}
textarea{
/*alinear los campos de texto multilinea texto*/
height: 3em;
}
.button{
/*alinear los botones con los campos de textp*/
padding.left:100px; /* mismo tamaņo que los elementos de la etiqueta*/
}
button{
/* este margen adicional representa aproximadamente el mismo espacio que el espacio
   entre las etiquetas y sus campos de texto*/
  margin-left: 3.5em;
}
h1{

