style.css

/* Resets margin and padding and centers the calculator */
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: gray;
}

/* Creates the layout for the numbers, clear, and decimal */
#numberButtons {
    display: grid;
    grid-template-areas: 
    "seven eight nine"
    "four five six"
    "one two three"
    "clear zero decimal";
}

/* Sets the layout for the operator buttons */
#operatorButtons {
    display: grid;
    grid-template-areas:
    "divide"
    "multiply"
    "subtract"
    "add"
    "equals";
}

/* Sets the overall layout of the calculator */
#calculatorBody {
    display: grid;
    grid-template-areas:
    "calDisplay calDisplay"
    "numButtons opButtons"
    "numButtons opButtons";
    grid-template-rows: 150px 150px  150px;
    grid-template-columns: 150px 150px;
    border: 2px solid yellow;
}

/* Places the display */
#calculatorDisplay {
    grid-area: calDisplay;
    /* width: 290px;
    height: 140px; */
    border: 2px solid black;
}

/* Places the numbers to the left */
#numberButtons {
    grid-area: numButtons;
    /* width: 140px;
    height: 440px; */
    border: 2px solid red;
}

/* Places the operators */
#operatorButtons {
    grid-area: opButtons;
    /* width: 140px;
    height: 440px; */
    border: 2px solid purple;
}