* {
  box-sizing: border-box;
}

body {
  margin: 0px;
}

.calculator {
  width: 400px;
  background-color: black;
}

.row {
  height: 100px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 2px;
  margin-top: 2px;
}

.button {
  border: none;
  background-color: #d8d9db;
  font-size: 40px;
  cursor: pointer;
}

.button:hover {
  background-color: #ebebeb;
}

.button:active {
  background-color: #bdbdc0;;
}

.button:last-child {
  background-color: #df974c;
  color: white;
}

.button:last-child:hover {
  background-color: #dfb07e;
}

.button:last-child:active {
  background-color: #db8830;
}

.result-box {
  width: 100%;
  display: flex;
  justify-content: right;
  align-items: center;
  padding-right: 2px;
}

.clear-button {
  grid-area: clear;
}

.erase-button {
  grid-area: erase;
}

.divide-button {
  grid-area: divide;
}

.zero-button {
  grid-area: zero;
}

.equals-button {
  grid-area: equals;
}

.first-row {
  color: white;
  font-family: monospace;
  font-size: 40px;
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 0px;
}

.second-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: "clear clear erase divide";
}

.sixth-row {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: "zero zero zero equals";
}