style.css

*, *:before, *:after {
    -webkit-box-sizing: inherit;
            box-sizing: inherit;
    margin: 0;
    padding: 0;
}
html {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

body {
    display: grid;
    align-content: center;
    justify-content: center;
    background-color: rgb(243, 236, 236);
    height: 100vh;
}
.grid-container {
    display: grid;
    background-color: white;
    width: 30vw;
    height: 90vh;
}
.display-container {
    display: flex;
    background-color: black;
    align-items: center; 
    justify-content: center;
    width: 100%;
    height: 20vh;
}

.grid-button-container {
    display: grid;
    height: 70vh;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5,1fr);
}
.button-element-container, .button-element-container2 {
    display: flex;
    border: solid 1px rgb(175, 168, 168);
    align-items: center;
    justify-content: center;
}
.button-element-container:hover, .button-element-container2:hover {
    background-color: rgb(172, 169, 169);
}
#erase-icon {
    width: 39px;
    height: 35px;
}

.display-container { 
    color: rgb(255, 255, 255);
}