body{
background: rgb(23,125,173);
background: linear-gradient(0deg, rgba(23,125,173,1) 0%, rgba(0,0,0,1) 100%);
background-repeat: no-repeat;
margin: 0;
padding: 0;
font-size: 18px;
}
html, body{
display: table;
width: 100%;
}
h2{
font-size: 2.25em;
text-align: center;
margin: 40px 0;
font-family: 'Electrolize', sans-serif;
color: azure;
}
.calculator{
width: 100%;
max-width: 350px;
margin: auto;
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0.85) 2%, rgba(4,59,121,0.3) 60%, rgba(0,0,0,0.2) 85%);
height: 450px;
box-sizing: border-box;
padding-top: 30px;
margin-bottom: 50px;
border-radius: 25px;
box-shadow: 10px 10px 20px 4px rgba(0,0,0,0.25);
border: 1px solid rgba(240, 255, 255, 0.25);
}
.text-input{
max-width: 300px;
width: 100%;
margin: auto;
border-radius: 15px;
border-top: 4px solid rgba(0,0,0,0.5); 
border-left: 4px solid rgba(0,0,0,0.5);
height: 50px;
line-height: 2.5;
padding: 0 15px;
box-sizing: border-box;
background: rgba(255,255,255,0.75);
font-weight: bold;
font-size: 18px;
font-family: 'Electrolize', system-ui, sans-serif;
}
#input{
display: block;
white-space: nowrap;
overflow: hidden;
text-align: right;
}
#input > sup{
font-size: 60%;
}
.calculator-box{
width: 100%;
max-width: 300px;
margin: 5% auto 5% auto;
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
}
button{
color: white;
font-weight: bold;
padding: 10px;
border-radius: 6px;
text-align: center;
font-family: 'Electrolize', system-ui, sans-serif;
border: none;
box-shadow: 0px 4px 0px 0px rgba(255,255,255,0.45);
}
button:hover{
cursor: pointer;
}
button:focus,
#input:focus{
outline: none;
}
button:active{
transform: scale(0.85);
}
button:disabled{
opacity: 0.6;
}
.operator{
background: rgba(0,0,0,0.45);
font-size: 0.95em;
}
.number{
background: rgba(255,255,255,0.75);
color: black;
font-size: 1.05em;
}
.delete-all-character{
background: darkred;
}
.result{
background: rgba(255,170,0,0.8);
color: black;
font-size: 1.25em;
grid-column: 4/6;
grid-row: 5;
}
.on,
.off{
background: rgba(255,255,255,0.75);
color: black;
}
.delete-last-character{
background: dimgrey;
}
.delete-last-character:before{
content: "\f55a";
}
button:nth-child(4):before{
content: "\f698";
}
.delete-last-character:before,
button:nth-child(4):before{
font-family: "Font Awesome 5 Pro";
font-weight: 400;
}
button:nth-child(14){
grid-column: 4;
grid-row: 3/5;
}
.active{
background: black;
color: white;
}