/* v.1.0.3 */
/* inspired by Bing Web Calculator, Google Web Calculator, Google Calculator App and other
 */

.calculator { border-radius: 7px; width: 100%; max-width: 290px; margin: 0 auto; }
input, #calcResult{ font-size: 16px; display: block; text-align: right; padding: 7px !important; }
#calcResult { font-size: 14px; border-radius: 0 0 4px 4px; }
input, input:focus { border-radius: 7px 7px 0 0;  text-align: right; border-bottom: 0; }
form { margin: 5px 0;  }

input[type="text"]{ background: var(--l3); }
input[type="text"]:hover { background: var(--l4); }

.button {
border-radius: 4px;
}

.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
margin: 0 auto;
margin-top: 15px;
padding: 0;
justify-content: center;
align-items: center;
text-align: center;
}

.grid a {
display: inline-flex;
min-height: 27px;
width: 100%;
/*outline: 1px solid var(--red);*/
align-items: center;
justify-content: center;
text-align: center;
margin: 0 auto;
box-sizing: border-box;
}
@media(max-width: 200px) {

.grid {
grid-gap: 2px;
}

.grid a {
font-size: x-small;
min-height: 10px;
}

}


@media(max-width: 130px) {
.grid {
grid-gap: 1px;
}

.grid a {
min-height: 5px;
min-width: 5px;
font-size: x-small;
}

}

@media(max-width: 120px) {
.grid {
grid-template-columns: 1fr 1fr;
}
}