* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-size: 50px;
  background-color: aliceblue;
}

.child {
  border-radius: 5px;
}


#calculator {
  background-color: black;
  border: .5rem solid steelblue;
  margin:auto;
  display: grid;
  grid-template-areas: 
  "result result result result"
  "ac plus-minus percent division"
  "seven eight nine multiply"
  "four five six minus"
  "one two three plus"
  "zero zero point equals";
  gap: 5px;
  width: 440px;
  margin-top: 150px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

div {
  padding: 10px
}

.beige-bg {
  background-color: beige;
}

.blue-bg {
  background-color: steelblue;
}

.blue-bg:hover {
  background-color: lightcyan;
}

.operator {
  background-color: darksalmon;
}

.operator:hover {
  background-color: rosybrown;
}

.operand {
  background-color: lightblue;
}

.operand:hover {
  background-color: lightcyan;
}

.equals {
  background-color: indianred;
}

.equals:hover {
  background-color: rosybrown;
}

#result {
  grid-area: result;
  text-align: right;
  justify-items: center;
  height: 80px;
}

#ac {
  grid-area: ac;
  text-align: center;

}
#plus-minus {
  grid-area: plus-minus;
  text-align: center;

}
#percent {
  grid-area: percent;
  text-align: center;

}
#division {
  grid-area: division;
  text-align: center;

}
#seven {
  grid-area: seven;
  text-align: center;

}
#eight {
  grid-area: eight;
  text-align: center;

}
#nine {
  grid-area: nine;
  text-align: center;

}
#multiply {
  grid-area: multiply;
  text-align: center;

}
#four {
  grid-area: four;
  text-align: center;

}
#five {
  grid-area: five;
  text-align: center;

}
#six {
  grid-area: six;
  text-align: center;

}
#minus {
  grid-area: minus;
  text-align: center;

}
#one {
  grid-area: one;
  text-align: center;

}
#two {
  grid-area: two;
  text-align: center;

}
#three {
  grid-area: three;
  text-align: center;

}
#plus {
  grid-area: plus;
  text-align: center;

}
#zero {
  grid-area: zero;
  text-align: center;

}
#decimal {
  grid-area: point;
  text-align: center;

}
#equals {
  grid-area: equals;
  text-align: center;

}