:root {
    --case: #3315B9;
    --buttons: #F8F1D8;
    --display: #F8F1D8;
    --buttonsHover: #4525D8;
    --operatorButtons: #FCCC20;
}

body {
    font-family: monospace;
    font-size: large;
    font-weight: bold;
}

.container {
    margin: 50px auto;
    width: 300px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 14px;
    border: 2px solid var(--case);
    border-radius: 5px;
    background-color: var(--case);
}

.display {
    flex-basis: 100%;
    height: 50px;
    background-color: var(--display);
    text-align: right;
    font-size: xx-large;
}



.middle {
    flex-basis: 100%;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

button {
    border: none;
    padding: 15px 25px;
    width: 71.25px;
    background-color: var(--buttons);
}

button:hover {
    background-color: var(--buttonsHover);
}

.operator, .equal {
    background-color: var(--operatorButtons);
}

.clear {
    width: 223.75px;
}