* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.5rem;
    color: #ccc;
}

.calculator {
    background-color: rgb(2, 39, 51);
    max-width: 445px;
    margin: 30px auto;
    border: 10px solid #212529;
    border-radius: 5px;
}

.display { 
    width: 100%;
    height: 100px;
    padding: 10px;
    background-color: darkslategray;
    border: 8px solid dimgray;
    display: flex;
    justify-content: start;
    align-items: end;
}

.buttons {
    width: 100%;
    padding: 5px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.buttons button {
    flex-basis: 100px;
    height: 70px;
    padding: 5px;
    border: none;
    border-radius: 5px;
}
.buttons .clear {
    background-color: darkred;
}

.buttons .backspace {
    background-color: #cfd8e0;
    color: darkred;
}

.buttons .digit {
    background-color: darkolivegreen;
}

.buttons .operator {
    background-color: dimgrey;
}

.buttons .dot {
    background-color: darkslategray;
}

.buttons .equals {
    flex-basis: 205px;
    background-color: darkgreen;
}