/* display */
#display { grid-area: cal-display; }
/* number */
#num0 { grid-area: cal-0; }
#num1 { grid-area: cal-1; }
#num2 { grid-area: cal-2; }
#num3 { grid-area: cal-3; }
#num4 { grid-area: cal-4; }
#num5 { grid-area: cal-5; }
#num6 { grid-area: cal-6; }
#num7 { grid-area: cal-7; }
#num8 { grid-area: cal-8; }
#num9 { grid-area: cal-9; }
#dot { grid-area: cal-dot; }
/* operator */
#add { grid-area: cal-add; }
#subtract { grid-area: cal-subtract; }
#multiply { grid-area: cal-multiply; }
#divide { grid-area: cal-divide; }
#equals { grid-area: cal-equals; }
#clear { grid-area: cal-clear; }
#backspace { grid-area: cal-backspace; }


.grid-container {
    display: grid;
    grid-template-areas:
    "cal-display cal-display cal-display cal-display"
    "cal-clear cal-clear cal-backspace cal-divide"
    "cal-7 cal-8 cal-9 cal-multiply"
    "cal-4 cal-5 cal-6 cal-subtract"
    "cal-1 cal-2 cal-3 cal-add"
    "cal-0 cal-0 cal-dot cal-equals"
    ;

    width: 400px;
    height: 600px;
    margin: 0 auto;
    gap: 15px;
    padding: 20px;
    border: 2px solid black;
}

.grid-container > button {
    font-size: 25px;
    border: 1px solid black;
    cursor: pointer;
    background-color: white;
}

/* .grid-container > button:hover {
    background-color: red;
}

.grid-container > button:active {
    background-color: yellow;
} */

#display {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;

    border: 1px solid black;
}

#display > span {
    position: relative;
    font-size: 50px;
    padding: 5px;
    letter-spacing: 2px;
}