body {
  font-family: Verdana, Helvetica, sans-serif;
  background: #F5DA81;
  margin: auto;
  display: flex;
  height: 100%;
  width: 100%;
}

main {
  display: block;
  margin: auto;
  padding: 0.50em;
  width: 100%;
}

header {
  text-align: center;
  font-family: 'Lobster Two', cursive;
}

h1 {
  text-align: center;
font-family: 'Pacifico', cursive;
}

#fondo {
  text-align: center;
  padding: 2em;
  border: 2px solid;
  margin: auto;
  width: 20em;
  border-radius: 6px;
  background: #6E6E6E;
  -webkit-box-shadow: 7px 10px 12px 1px rgba(0,0,0,0.84);
-moz-box-shadow: 7px 10px 12px 1px rgba(0,0,0,0.84);
box-shadow: 7px 10px 12px 1px rgba(0,0,0,0.84);

}
#num {
  text-align: right;
  background: #D8F6CE;
  font-size: 1.5em;
  border: 2px solid;
  -webkit-box-shadow: inset 3px 4px 2px 2px rgba(245,240,245,0.39);
-moz-box-shadow: inset 3px 4px 2px 2px rgba(245,240,245,0.39);
box-shadow: inset 3px 4px 2px 2px rgba(245,240,245,0.39);
font-family: 'Inconsolata' , Verdana;
border-radius: 4px;
}

button {
  flex: 1;
  padding: 0.50em ;
  margin: 0.25em;
  text-align: center;
  font-size: 1em;
  background: #424242;
  color: white;
  border-radius: 4px;
  border: 1px solid;
 -webkit-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.92);
-moz-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.92);
box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.92);
}

#final {
  text-align: center;
font-size: 1em;
padding: 1em;
}

#calcular {
  background: #08298A;
}