* {
    font-family: monospace;
}

button, body, html {
    margin: 0px;
    padding: 0px;
}

body {
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-content: center;
    height: 100vh;
}

#footer {
    align-self: center;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#calculator {
    width: 200px;
    padding: 10px;
    border: 1px solid black;
    background-color: rgb(183, 204, 243);
    box-shadow: 3px 3px darkblue;
}

#display {
    min-height: 6em;
    background-color: rgb(252, 251, 235);
    padding: 5px;
    margin-bottom: .75em;
    border: inherit;
    box-shadow: 2px 2px #2e3436;
    font-size: 18px;
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    align-items: flex-end;
}

#inputs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    column-gap: 4px;
    row-gap: 4px;
}

#inputs button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3em;
    border: 1px solid black;
    background-color:rgb(229, 237, 253);
    box-shadow: 2px 2px darkblue;
    font-weight: bold;
    font-size: 12px;
}

#inputs button:active {
    box-shadow: none;
    transform: translate(2px, 2px);
}

#inputs .operation {
    background-color: rgb(203, 218, 248);
}

button[id="0"] {
    grid-column: 1 / span 2;
}