body {
    background-color: rgb(236, 236, 236);
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 600px;
}

#calculator {
    background-color: rgb(142, 209, 173);
    border-radius: 10px;
}

#screen {
    display: flex;
    align-items: center;
    justify-content: right;
    background-color: rgb(214, 241, 219);
    width: 240px;
    height: 60px;
    margin: 16px;
    border-radius: 10px;
}

#display {
    margin-right: 10px;
    font-size: 22px;
    font-family: "Montserrat";
    font-weight: 600;
}

#buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 6px;
    row-gap: 6px;
    margin: 16px;
}

button {
    background-color: rgb(234, 255, 245);
    height: 40px;
    border-radius: 10px;
    border-width: 0px;
    font-family: "Montserrat";
    font-size: 18px;
    font-weight: 500;
}

.clear {
    grid-column: 1 / span 2;
}

.delete, .clear {
    background-color: rgb(244, 238, 155);
}

.operator {
    background-color: rgb(180, 255, 190);
    font-size: 20px;
}

.equal {
    grid-column: 3 / span 2;
    background-color: rgb(139, 245, 245);
    font-size: 20px;
}

#backspace {
    margin-top: 4px;
}