body {
    background-color: rgb(233, 233, 233);
}

#viewport {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#calculator {
    background-color: white;
    padding: 1.5em 1.5em 1.5em 1.5em;
    display: flex;
    flex-direction: column;
    width: max-content;
    border-radius: 1em;
    box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12)
}

#screen {
    max-width: 100%;
    height: 6em;
    background-color: rgb(214, 214, 214);
    margin-bottom: 1.5em;
    padding: 1em 1em 1em 1em;
    border-radius: 0.5em;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 10px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px inset;
}

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

button {
    font-size: 14px;
    font-family: 'Varela Round', sans-serif;
    border: none;
    border-radius: 1.5em;
    background-color: rgb(225, 225, 225);
    box-shadow:
    0 1px 1px rgba(0,0,0,0.25), 
    0 2px 2px rgba(0,0,0,0.20), 
    0 4px 4px rgba(0,0,0,0.15), 
    0 8px 8px rgba(0,0,0,0.10),
    0 16px 16px rgba(0,0,0,0.05);
}

button:active {
    font-size: 14px;
    font-family: 'Varela Round', sans-serif;
    border: none;
    border-radius: 1.5em;
    box-shadow:
    0 1px 1px rgba(0,0,0,0.30), 
    0 2px 2px rgba(0,0,0,0.20), 
    0 4px 4px rgba(0,0,0,0.15), 
    0 8px 8px rgba(0,0,0,0),
    0 16px 16px rgba(0,0,0,0.0);
}

button:focus {
    outline:0;
}

.btn-2 {
    grid-column: 3 / 5;
}

.btn-number-style {
    background-color: rgb(240, 240, 240);
}

p {
    font-size: 20px;
    font-family: 'Varela Round', sans-serif;
}