grid.css

/* --------------- General Settings --------------- */
body {
    /* Reset */
    margin: 0;
    cursor: default;

    /* General */
    background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}

:root, #display, button {
    font-family: 'Poppins', sans-serif;
}

input, textarea, button {
    border: 0;
    border-radius: 0;
    background-color: transparent;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    outline: none;
    appearance: none;
}

html {
    font-size: 250%;
    font-weight: 300;
    line-height: 1.3;
}

/* --------------- Calculator container --------------- */

.calculator {
    border-radius: 12px;
    box-shadow: 10px 10px 10px 3px rgba(0, 0, 0, 0.18);
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5em;
    max-width: 10em;
    overflow: hidden;
    border: 1px solid black;
}


/* --------------- Display bar --------------- */

#display {
    padding: 10px;
}

.calc_display {
    background: #222222;
    color: #fff;
    font-size: 1.688em;
    text-align: right;
}

/* --------------- Calculator Keys --------------- */
.calc_keys {
    background-color: #999;
    display: grid;
    grid-gap: 1px;
    grid-template-columns: repeat(4, 1fr);
}

button {
    background-color: #fff;
    color: #222222;
    text-align: center;
}

/* --------------- Op keys --------------- */
.key-operator {
    background-color: #DCDDDD;
  }


/* --------------- is-depressed --------------- */
.is-depressed:focus {
    background-color: #A5A6A6;
  }

/* --------------- Equals key --------------- */
#equals {
    grid-column: -2;
    grid-row: 2 / span 4;
    background-color: #D9A1A0;
}
#equals:active {
    box-shadow: inset 5px 5px 10px #A37978;
    ;
}

/* --------------- Shadow inset for number keys --------------- */
.calc_keys > .active:active {
    box-shadow: inset -3px 1px 8px #BFBFBF;
 }