style.css

#calculator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 400px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 3px;
    background-color: black;
}
p {
    text-align: center;
    font-family: monospace;
}

#display {
    grid-column: 1/5;
    grid-row: 1;
    background-color: black;
}
#display h2, h3 {
    text-align: right;
    color: white;
    margin: 0;
    position: relative;
    height: 1em;
    padding: 0.7rem 1em 0em 1em;
    font-family: monospace;
}

.button {
    color: #333;
    border: 1px solid black;
    outline: none;
}
.button:hover {
    color: white;
    border: 1px solid #ddd;
}
.button:active {
    border: 1px solid white;
    transform: translateY(1px);
}

#clear {
    background-color: orangered;
}
#clear:hover {
    background-color: red;
}
#delete {
    background-color: orange;
}
#delete:hover {
    background-color: darkorange;
}
#equals {
    color: #ee4;
    background-color: dodgerblue;
}
#equals:hover {
    color: white;
    background-color: blue;
}
.number {
    background-color: darkgray;
}
.math-operator{
    color: #ee4;
    background-color: lightslategrey;
}
.math-operator:hover {
    color: white;
    background-color: slategrey;
}
#multiply {
    grid-row: 3;
    grid-column: 4;
}
#add {
    grid-row: 4;
    grid-column: 4;
}
#subtract {
    grid-row: 5;
    grid-column: 4;
}
.bracket {
    color: black;
    background-color: rgb(122, 131, 139);
}