style.css

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  width: 300px;
  height: 400px;
  grid-template-areas:
  "output output clear clear"
  "one two three add"
  "four five six subtract"
  "seven eight nine multiply"
  "zero dot equals divide";
  border: 2px solid grey;
  justify-items: center;
  border-radius: 5px;
  margin: auto;
  margin-top: 200px;
}

.output {
  grid-area: output;
  border: 10px solid;
  border-color: lightsteelblue;
  width: 130px;
  background-color: white;
  text-align: center;
  padding: 10px 0;
  font: 30px "Fira Sans";
  font-weight: bold;
}

.button {
  width: 75px;
  border: 1px solid grey;
  font: 2em "Fira Sans";
  font-weight: bold;
  background-color: #629bdc;
}

.button:hover {
  opacity: .7;
  box-shadow: 1px 1px 5px #fff;
  cursor: pointer;
}

.clear {
  background-color: #3d93f5;
  grid-area: clear;
  width: 150px;
}

.add, .subtract, .multiply, .divide {
  background-color: #525252;
}

.equals, .dot {
  opacity: .8;
}

body {
  background: lightskyblue;
}