style.css

body {
    background-color: rgb(36, 36, 36);
    display: grid;
    grid-template-rows: 1fr 2fr 1fr;
    grid-template-areas: ". . ."
                         ". calculator ."
                         ". . .";
}

#calculator {
    grid-area: calculator;
    background-color: rgba(78, 131, 126, 0.445);
    width: 22em;
    height: 30em;
    margin: auto;
    box-shadow: 3px 3px 10px rgb(0, 0, 0);
    display: grid;
    gap: .4em;
    padding: .5em;
    border: .5em solid rgba(40, 163, 172, 0.644);
    border-radius: 10px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-template-areas: "display display display display"
                         "allClear delete plusMinus division"
                         "seven  eight nine multiplication"
                         "four five six subtraction"
                         "one two three addition"
                         "zero zero point equals"
}

button {
    font-family: Helvetica;
    font-size: 1.35rem;
    font-weight: 550;
    border-radius: .4em;
    border: 0em ;
    color: rgb(255, 255, 255);
}

button:active {
    background-color:rgb(0, 183, 255);
}

.special {
    background-color: rgb(46, 139, 119);
}

.operation {
    background-color: rgb(39, 122, 218);
    font-size: 1.5em;
}

.number {
    background-color: rgba(255, 123, 0, 0.76);
}

#display {
    grid-area: display;
    font-size: 3.8rem;
    padding-right: .25em;
    margin-bottom: .06em;
    border-radius: .14em;
    border: 0px solid;
    color: rgba(255, 255, 255, 0.829);
    background-color: rgba(45, 218, 218, 0.527);
    text-align: end;
    overflow: hidden;
}

/* Defining grid area for all buttons */

#allClearBtn {
    grid-area: allClear;
}

#deleteBtn {
    grid-area: delete;
    font-size: 1.25rem;
}

#plusMinusBtn {
    grid-area: plusMinus;
}

#divisionBtn {
    grid-area: division;
}

#multiplicationBtn {
    grid-area: multiplication;
}

#subtractionBtn {
    grid-area: subtraction;
}

#additionBtn {
    grid-area: addition;
}

#equalsBtn {
    grid-area: equals;
}

#point {
    grid-area: point;
}

#nine {
    grid-area: nine;
}

#eight {
    grid-area: eight;
}

#seven {
    grid-area: seven;
}

#six {
    grid-area: six;
}

#five {
    grid-area: five;
}

#four {
    grid-area: four;
}

#three {
    grid-area: three;
}

#two {
    grid-area: two;
}

#one {
    grid-area: one;
}

#zero {
    grid-area: zero;
}

@media (max-width: 767px) {
    body {
        background-color: rgb(36, 36, 36);
        display: grid;
        grid-template-rows: .3fr 1fr .2fr;
        grid-template-areas: ". . ."
                             "calculator calculator calculator"
                             ". . .";                      
    }

}