html,
body {
  font-family: Verdana, Helvetica, sans-serif;
  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: Verdana, Helvetica, sans-serif;
}

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 {
  margin: auto;
  padding: 0.50em;
  max-width: 400px;
  border: 2px solid;
  border-radius: 5px;
}

.display,
.botones {
  display: flex;
}

input {
  margin: 0.50em auto;
  padding: 0 0.25em;
  text-align: right;
  font-size: 3em;
  letter-spacing: 0.25em;
  font-family: 'VT323', 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

*/

#x-cuadrado,
#x-inverso,
#raiz-cuadrada,
#x-elevado-y,
#suma,
#resta,
#multiplica,
#divide,
#decimal,
#entero,
#pos-neg,
#borrar {  
  border: 1px solid silver;
  border-radius: 3px;
  background-color: #D8D8D8;
}


#igual {
  border: 1px solid silver;
  border-radius: 3px;
  background-color: #5858FA;
  color: white;
}


}


#num-1, #num-2,
#num-3, #num-4,
#num-5, #num-6,
#num-7, #num-8,
#num-9, #num-0 {
  border: 1px solid silver;
  border-radius: 3px;
  background-color: #5858FA;

}