html,
body {
font-family: Verdana, Helvetica, sans-serif;
background: #C3E1D9;
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;
padding: 0.50em;
width: 100%;
}
header {
text-align: center;
font-family: 'Lobster Two', cursive;
}
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;
text-decoration: underline;
}
sup,
sub {
font-size: 0.5em;
}
section {
background: #88A48F;
margin: auto;
padding: 0.50em;
max-width: 400px;
border: 2px solid;
border-radius: 5px;
}
.display,
.botones {
display: flex;
}
input {
background: #BCF5A9;
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;
}
#pot-2,
#factorial,
#sumatorio,
#producto,
#x-cuadrado,
#x-inverso,
#raiz-cuadrada,
#x-elevado-y {
border: 1px solid silver;
border-radius: 3px;
background-color: #5858FA;
}
#pot-2:hover,
#factorial:hover,
#sumatorio:hover,
#producto:hover,
#x-cuadrado:hover,
#x-inverso:hover,
#raiz-cuadrada:hover,
#x-elevado-y:hover{
border: 1px solid silver;
background-color: #8181F7;
}
#suma,
#resta,
#multiplica,
#divide {
border: 1px solid silver;
border-radius: 3px;
background-color: #d2d2f9;
}
#suma:hover,
#resta:hover,
#multiplica:hover,
#divide:hover {
border: 1px solid silver;
background-color: #a5a5f3;
}
#decimal,
#entero,
#pos-neg {
border: 1px solid silver;
border-radius: 3px;
background-color: #BE81F7;
}
#decimal:hover,
#entero:hover,
#pos-neg:hover {
border: 1px solid silver;
background-color: #8e6af5;
}
#igual {
border: 1px solid silver;
border-radius: 3px;
background-color: #F7BE81;
}
#igual:hover {
border: 1px solid silver;
background-color: #FAAC58;
}
#borrar {
border: 1px solid silver;
border-radius: 3px;
background-color: #a9db80;
}
#borrar:hover {
border: 1px solid silver;
background-color: #8ed058;
}
#num-1, #num-2,
#num-3, #num-4,
#num-5, #num-6,
#num-7, #num-8,
#num-9, #num-0 {
border: 1px solid white;
border-radius: 3px;
background-color: #C3E1D9;
}
#num-1:hover, #num-2:hover,
#num-3:hover, #num-4:hover,
#num-5:hover, #num-6:hover,
#num-7:hover, #num-8:hover,
#num-9:hover, #num-0:hover {
border: 1px solid white;
background-color: #d4dee1;
}
#inicio{
display: block;
text-align: right;
font-size: 1.5em;
margin-top: 2%;
}
div > a {
text-align: right;
color: #000000;
text-decoration: none;
border-bottom: 1px solid #76C9B3;
padding-top: 0.5%;
padding-bottom: 0.5%;
padding-left: 5%;
padding-right: 5%;
}
div > a:hover {
color: #FFFFFF;
background-color: #76C9B3;
}