html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
  padding: 0;
  margin: 0;
}
.wrapper {
    width: 400px;

    display: grid;
    font-family: Arial, Helvetica, sans-serif;
}


.calculator-screen {
    background-color:black;

    grid-row: 1 / 2;
    grid-column: 1 / 4;

    height: 67px;

}
.screen {
    color:white;
    text-align:right;

    margin-top: 20px;
    margin-right: 40px;

    font-size: xx-large;
}
.calculator-buttons {
    grid-row: 2 / 7;
    grid-column: 1 / 4;
}

.row {
    display: flex;
    flex-direction: row;
}

button {
    flex: 1;
    height: 67px;
}
/* on hover, color changes and font gets bigger */
button:hover {
    background-color:aliceblue;
    font-size: 1.1em;
}
/* on click, color changes to slightly darker shade and font returns to normal */
button:active {
    background-color:rgb(225, 236, 246);
    font-size:small;
}

.span-btn-c {
    /* apply flex to stretch to desired dimensions */
    flex: 2;
    /* add padding to align */
    padding-right: 22px;
}
.span-btn-zero {
    flex: 3;
    padding-right: 38px;
}