*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
button{
    min-width: 70px;
    height: 70px;
}
#screen{
    background-color: white;
    height: 70px;
    /* allow flex sizing instead of fixed width */
    flex: 2 1 0%;
    border: 1px solid black;
}

.first-row,
.second-row,
.third-row,
.fourth-row,
.fifth-row{
    display: flex;
    gap: 8px;
    width: 100%;
    margin: 8px 0;
}

.first-row .number{
    /* make the C button take 1 flex part so screen (2) + C (1) = full width */
    flex: 1 1 0%;
}

/* make number buttons expand equally on their rows */
.second-row .number,
.third-row .number,
.fourth-row .number,
.fifth-row .number{
    flex: 1 1 0%;
}

/* operators share the same flex behavior as number buttons */
.second-row .operator,
.third-row .operator,
.fourth-row .operator,
.fifth-row .operator{
    flex: 1 1 0%;
    background: #f0ad4e;
    border: none;
}

button { cursor: pointer; }