body {
  background: #eee;
}

button {
  border: none;
}

button:hover {
  background: #ddd;
}

button:active,
.calculator-button-active {
  background: #bbb;
}

button:focus {
  outline: none;
}

.flex-container {
  display: flex;

  justify-content: center;
  align-items: center;

  min-height: 100vh;
}

.calculator {
  display: grid;

  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1.5fr repeat(5, 1fr);

  grid-template-areas:
    "display display display display"
    "main-button-area main-button-area main-button-area division-operator"
    "number-seven number-eight number-nine multiplication-operator"
    "number-four number-five number-six subtraction-operator"
    "number-one number-two number-three addition-operator"
    "number-zero number-zero . equality-operator";

  column-gap: 1px;
  row-gap: 1px;

  min-width: 270px;
  min-height: 480px;

  border: 1px solid #777;

  background: #ccc;
}

.calculator__display {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  grid-area: display;

  box-sizing: border-box;
  padding: 1.6rem;
  padding-right: 1rem;

  font-family: sans-serif;
  font-size: 1.4rem;

  text-align: right;

  background: #fff;
}

.calculator__division {
  grid-area: division-operator;
}

.calculator__multiplication {
  grid-area: multiplication-operator;
}

.calculator__subtraction {
  grid-area: subtraction-operator;
}

.calculator__addition {
  grid-area: addition-operator;
}

.calculator__equality {
  grid-area: equality-operator;
}

.calculator__nine {
  grid-area: number-nine;
}

.calculator__eight {
  grid-area: number-eight;
}

.calculator__seven {
  grid-area: number-seven;
}

.calculator__six {
  grid-area: number-six;
}

.calculator__five {
  grid-area: number-five;
}

.calculator__four {
  grid-area: number-four;
}

.calculator__three {
  grid-area: number-three;
}

.calculator__two {
  grid-area: number-two;
}

.calculator__one {
  grid-area: number-one;
}

.calculator__zero {
  grid-area: number-zero;
}