html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    background-color: wheat;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 5px;
    justify-items: stretch; /* Ensure items stretch to fill the grid area */
    align-items: stretch; /* Ensure items stretch to fill the grid area */
    grid-template-areas: 
        "question question question question"
        "button1 button1 button2 button2"
        "button3 button3 button4 button4"
        "incorrect incorrect incorrectnum calc"
        "correct correct correctnum reset";
}

#question {
    grid-area: question;
    font-size: 25px;
    text-align: center;
}

button {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

#1 {
    grid-area: button1;
}

#2 {
    grid-area: button2;
}

#3 {
    grid-area: button3;
}

#4 {
    grid-area: button4;
}

.incorrect-answers.ques {
    grid-area: incorrect;
    color: red;
    font-size: 25px;
    display: inline;
}

.incorrect-answers.num {
    grid-area: incorrectnum;
    color: red;
    font-size: 25px;
    display: inline;
}

.correct-answers.ques {
    grid-area: correct;
    color: green;
    font-size: 25px;
    display: inline;
}

.correct-answers.num {
    grid-area: correctnum;
    color: green;
    font-size: 25px;
    display: inline;
}

.calculator {
    grid-area: calc;
}
#reset {
    grid-area: reset;
}