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

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

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

header {
  text-align: center;
  font-family: 'Arial';
}

h1 {
  margin: 0;
  letter-spacing: 0.02em;
}

p {
  margin: 0 0 0.50em;
  line-height: 1.5;
  letter-spacing: 0.02em;
  font-size: 1.2em;
}

span {
  display: block;
}

sup,
sub {
  font-size: 0.5em;
}

section {
  background: ligthgrey;
  margin: auto;
  padding: 0.50em;
  max-width: 400px;
  border: 2px solid;
  border-radius: 5px;
}

.display,
.botones {
  display: flex;
}

input {
  background: rgba(0,255,0, 0.5);
  margin: 0.50em auto;
  padding: 0 0.25em;
  text-align: right;
  font-size: 3em;
  letter-spacing: 0.25em;
  font-family: 'Arial', monospace;
  border: 5px inset;
  border-radius: 5px;
  width: 90%;
}

button {
  flex: 1;
  padding: 0.50em 0;
  margin: 0.25em;
  text-align: center;
  font-size: 1.2em;
}

/*

COLORES DEGRADADOS PARA LOS BOTONES

*/



#suma,
#resta,
#multiplica,
#divide,#decimal,
#entero,
#pos-neg,
#igual,
#borrar,#num-1, #num-2,
#num-3, #num-4,
#num-5, #num-6,
#num-7, #num-8,
#num-9, #num-0,#x-cuadrado,
#x-inverso,
#raiz-cuadrada,
#x-elevado-y {
  border: 1px solid silver;
  border-radius: 3px;
  background-color: #d2d2f9; background-image: -webkit-gradient(linear, left top, left bottom, from(#d2d2f9), to(#a6a6f2));
  background-image: -webkit-linear-gradient(top, #d2d2f9, #a6a6f2);
  background-image: -moz-linear-gradient(top, #d2d2f9, #a6a6f2);
  background-image: -ms-linear-gradient(top, #d2d2f9, #a6a6f2);
  background-image: -o-linear-gradient(top, #d2d2f9, #a6a6f2);
  background-image: linear-gradient(to bottom, #d2d2f9, #a6a6f2);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d2d2f9, endColorstr=#a6a6f2);
}