@font-face {
    font-family: "Digital7";
    src: url("../assets/digital-7_mono.ttf") format("truetype");
}

#calculator {
    margin: 1em;
    font-family: Verdana, "sans-serif";
    color: #456789;
    font-size: 1.2em;
    background: #ffd3ec;
    border-radius: 1.6em;
    padding: 2em .8em 2em .8em;
    overflow: hidden;
    border: #dea4be 2px solid;
    box-shadow: 0.15em 0.15em 0.5em 0.05em #bf8ea4;
    width: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
}

.button_row {
    clear: both;
}

.button, #display {
    float: left;
    border: 2px solid #456789;
    height: 2em;
    padding: 0.5em;
    vertical-align: middle;
    text-align: center;
    line-height: 2em;
    margin: 0.3em;
    border-radius: 0.4em;
    box-shadow: 0.2em 0.2em #c6a3b7;
}

.number {
    width: 3em;
    background: #ffec85;
}

.operation {
    width: 4.2em;
    background: #ff9a65;
}

.update_result {
    width: 10.28em;
}

#equals {
    background: #6de1ff;
    width: 18.5em;
}

#clear {
    width: 2em;
    background: #fdfff8;
}

/* for later use */
/*#lucky {*/
/*}*/

#display {
    background: aquamarine;
    width: 22.1em;
    box-shadow: -0.15em 0.3em 0.5em #66cca8 inset;
    text-align: right;
    padding-right: 0.8em;
    /*  Chrome + Safari fix for line-height of display text */
    -webkit-padding-before: 0.9em;
    -webkit-padding-after: 0.1em;
}

#display > span {
    font-family: Digital7, "Lucida Grande", Tahoma, sans-serif;
    font-style: italic;
    font-size: 2.4em;
    line-height: 0.6em;
}

.number_pressed {
    box-shadow: inset 0.1em 0.1em 0 0.1em #ccba6c;
}

.operation_pressed {
    box-shadow: inset 0.15em 0.1em 0 0.1em #cc7a52;
}

.equals_pressed {
    box-shadow: inset 0.15em 0.15em 0 0.1em #58b5cc;
}

.clear_pressed {
    box-shadow: inset 0.1em 0.15em 0 0.1em #cbccc8;
}