html,
body {
font-family: Verdana, Helvetica, sans-serif;
background: white;
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: 'Quantico', 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 {
background: black;
margin: auto;
padding: 0.50em;
max-width: 400px;
border: 2px solid;
border-radius: 5px;
}
.display,
.botones {
display: flex;
}
input {
background: White;
margin: 0.50em auto;
padding: 0 0.25em;
text-align: right;
font-size: 3em;
letter-spacing: 0.25em;
font-family: 'Quantico', sans-serif;
width: 90%;
}
button {
flex: 1;
margin: 0.25em;
padding: 0.50em 0;
text-align: center;
font-size: 1.2em;
}
/*
COLORES DEGRADADOS PARA LOS BOTONES
*/
#x-cuadrado,
#x-inverso,
#raiz-cuadrada,
#x-elevado-y {
border: 1px solid silver;
border-radius: 3px;
background-color: #ffd65e; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffd65e), to(#febf04));
background-image: -webkit-linear-gradient(top, #ffd65e, #febf04);
background-image: -moz-linear-gradient(top, #ffd65e, #febf04);
background-image: -ms-linear-gradient(top, #ffd65e, #febf04);
background-image: -o-linear-gradient(top, #ffd65e, #febf04);
background-image: linear-gradient(to bottom, #ffd65e, #febf04);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffd65e, endColorstr=#febf04);
}
#x-cuadrado:hover,
#x-inverso:hover,
#raiz-cuadrada:hover,
#x-elevado-y:hover{
border: 1px solid silver;
background-color: #ffc92b; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffc92b), to(#ce9a01));
background-image: -webkit-linear-gradient(top, #ffc92b, #ce9a01);
background-image: -moz-linear-gradient(top, #ffc92b, #ce9a01);
background-image: -ms-linear-gradient(top, #ffc92b, #ce9a01);
background-image: -o-linear-gradient(top, #ffc92b, #ce9a01);
background-image: linear-gradient(to bottom, #ffc92b, #ce9a01);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffc92b, endColorstr=#ce9a01);
}
#suma,
#resta,
#multiplica,
#divide {
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);
}
#suma:hover,
#resta:hover,
#multiplica:hover,
#divide:hover {
border: 1px solid silver;
background-color: #a5a5f3; background-image: -webkit-gradient(linear, left top, left bottom, from(#a5a5f3), to(#7a7aeb));
background-image: -webkit-linear-gradient(top, #a5a5f3, #7a7aeb);
background-image: -moz-linear-gradient(top, #a5a5f3, #7a7aeb);
background-image: -ms-linear-gradient(top, #a5a5f3, #7a7aeb);
background-image: -o-linear-gradient(top, #a5a5f3, #7a7aeb);
background-image: linear-gradient(to bottom, #a5a5f3, #7a7aeb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a5a5f3, endColorstr=#7a7aeb);
}
#decimal,
#entero,
#pos-neg {
border: 1px solid silver;
border-radius: 3px;
background-color: #b29af8; background-image: -webkit-gradient(linear, left top, left bottom, from(#b29af8), to(#9174ed));
background-image: -webkit-linear-gradient(top, #b29af8, #9174ed);
background-image: -moz-linear-gradient(top, #b29af8, #9174ed);
background-image: -ms-linear-gradient(top, #b29af8, #9174ed);
background-image: -o-linear-gradient(top, #b29af8, #9174ed);
background-image: linear-gradient(to bottom, #b29af8, #9174ed);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#b29af8, endColorstr=#9174ed);
}
#decimal:hover,
#entero:hover,
#pos-neg:hover {
border: 1px solid silver;
background-color: #8e6af5; background-image: -webkit-gradient(linear, left top, left bottom, from(#8e6af5), to(#6d47e7));
background-image: -webkit-linear-gradient(top, #8e6af5, #6d47e7);
background-image: -moz-linear-gradient(top, #8e6af5, #6d47e7);
background-image: -ms-linear-gradient(top, #8e6af5, #6d47e7);
background-image: -o-linear-gradient(top, #8e6af5, #6d47e7);
background-image: linear-gradient(to bottom, #8e6af5, #6d47e7);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#8e6af5, endColorstr=#6d47e7);
}
#igual {
border: 1px solid silver;
border-radius: 3px;
background-color: #ff9a9a; background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9a9a), to(#ff4040));
background-image: -webkit-linear-gradient(top, #ff9a9a, #ff4040);
background-image: -moz-linear-gradient(top, #ff9a9a, #ff4040);
background-image: -ms-linear-gradient(top, #ff9a9a, #ff4040);
background-image: -o-linear-gradient(top, #ff9a9a, #ff4040);
background-image: linear-gradient(to bottom, #ff9a9a, #ff4040);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff9a9a, endColorstr=#ff4040);
}
#igual:hover {
border: 1px solid silver;
background-color: #ff6767; background-image: -webkit-gradient(linear, left top, left bottom, from(#ff6767), to(#ff0d0d));
background-image: -webkit-linear-gradient(top, #ff6767, #ff0d0d);
background-image: -moz-linear-gradient(top, #ff6767, #ff0d0d);
background-image: -ms-linear-gradient(top, #ff6767, #ff0d0d);
background-image: -o-linear-gradient(top, #ff6767, #ff0d0d);
background-image: linear-gradient(to bottom, #ff6767, #ff0d0d);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff6767, endColorstr=#ff0d0d);
}
#borrar {
border: 1px solid silver;
border-radius: 3px;
background-color: #a9db80; background-image: -webkit-gradient(linear, left top, left bottom, from(#a9db80), to(#96c56f));
background-image: -webkit-linear-gradient(top, #a9db80, #96c56f);
background-image: -moz-linear-gradient(top, #a9db80, #96c56f);
background-image: -ms-linear-gradient(top, #a9db80, #96c56f);
background-image: -o-linear-gradient(top, #a9db80, #96c56f);
background-image: linear-gradient(to bottom, #a9db80, #96c56f);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a9db80, endColorstr=#96c56f);
}
#borrar:hover {
border: 1px solid silver;
background-color: #8ed058; background-image: -webkit-gradient(linear, left top, left bottom, from(#8ed058), to(#7bb64b));
background-image: -webkit-linear-gradient(top, #8ed058, #7bb64b);
background-image: -moz-linear-gradient(top, #8ed058, #7bb64b);
background-image: -ms-linear-gradient(top, #8ed058, #7bb64b);
background-image: -o-linear-gradient(top, #8ed058, #7bb64b);
background-image: linear-gradient(to bottom, #8ed058, #7bb64b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#8ed058, endColorstr=#7bb64b);
}
#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: #f2f5f6; background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f5f6), to(#c8d7dc));
background-image: -webkit-linear-gradient(top, #f2f5f6, #c8d7dc);
background-image: -moz-linear-gradient(top, #f2f5f6, #c8d7dc);
background-image: -ms-linear-gradient(top, #f2f5f6, #c8d7dc);
background-image: -o-linear-gradient(top, #f2f5f6, #c8d7dc);
background-image: linear-gradient(to bottom, #f2f5f6, #c8d7dc);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f2f5f6, endColorstr=#c8d7dc);
}
#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 silver;
background-color: #d4dee1; background-image: -webkit-gradient(linear, left top, left bottom, from(#d4dee1), to(#a9c0c8));
background-image: -webkit-linear-gradient(top, #d4dee1, #a9c0c8);
background-image: -moz-linear-gradient(top, #d4dee1, #a9c0c8);
background-image: -ms-linear-gradient(top, #d4dee1, #a9c0c8);
background-image: -o-linear-gradient(top, #d4dee1, #a9c0c8);
background-image: linear-gradient(to bottom, #d4dee1, #a9c0c8);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d4dee1, endColorstr=#a9c0c8);
}