body {
  display: flex;
  justify-content: center;
}
.calculator {
  display: grid;
  grid-template-areas:
    "displayBar displayBar displayBar displayBar"
    "memory  memoryClear  clear  clearAll"
    "seven   eight   nine    divide"
    "four    five    six     multiply"
    "one     two     three   subtract"
    "decimal zero    equal    add";
}
.displayBar {
  grid-area: displayBar;
}
#memory {
  grid-area: memory;
}
#memoryClear {
  grid-area: memoryClear;
}
#clear {
  grid-area: clear;
}
#clearAll {
  grid-area: clearAll;
  background-color: rgba(255, 255, 255, 0.4);
}
#seven {
  grid-area: seven;
}
#eight {
  grid-area: eight;
}
#nine {
  grid-area: nine;
}
#divide {
  grid-area: divide;
  background-color: rgba(255, 255, 255, 0.4);
}
#four {
  grid-area: four;
}
#five {
  grid-area: five;
}
#six {
  grid-area: six;
}
#multiply {
  grid-area: multiply;
  background-color: rgba(255, 255, 255, 0.4);
}
#one {
  grid-area: one;
}
#two {
  grid-area: two;
}
#three {
  grid-area: three;
}
#subtract {
  grid-area: subtract;
  background-color: rgba(255, 255, 255, 0.4);
}
#decimal {
  grid-area: decimal;
}
#zero {
  grid-area: zero;
}
#equal {
  grid-area: equal;
  background-color: rgba(255, 255, 255, 1);
}
#add {
  grid-area: add;
  background-color: rgba(255, 255, 255, 0.4);
}

.calculator {
  box-sizing: border-box;
  height: 610px;
  width: 425px;
  background-color: #0077d2;
  border-radius: 10px;
}
.display {
  grid-area: display;
  height: 60px;
  width: 410px;
  font-size: 4em;
  font-weight: bolder;
  font-family: monospace;
  background-color: #ffffff;
  border: 4px solid #555555;
  border-radius: 5px;
  margin-top: 0.1em;
  margin-inline: 0.05em;
  text-align: right;
}
.history {
  height: 27px;
  width: 415px;
  font-size: 1.5em;
  color: #ffffff9a;
  /* background-color: rgba(255, 255, 255, 0.521); */
  padding-right: 8px;
  margin-left: auto;
  text-align: right;
  font-weight: lighter;
}
button {
  height: 92px;
  width: 92px;
  border: none;
  background-color: rgba(255, 255, 255, 0.74);
  border-radius: 18px;
  margin-inline: auto;
  margin-block: auto;
  padding: 0;
  font-weight: bolder;
  font-size: 40px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}