* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 1rem;
  color: #222;
  font-family: sans-serif;
}

body {
  position: relative;
  background-color: #f3efe0;
}

.container {
  padding: 1rem;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#calculator {
  padding: 1rem;
  height: 100%;
  min-width: 300px;
  max-width: 500px;
  max-height: 600px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: 8px;
  grid-row-gap: 8px;

  background-color: white;
  box-shadow: 0 0.8rem 1rem rgb(0, 0, 0, 0.08);
}

#result {
  padding: 1rem;
  font-weight: 100;
  font-size: 3rem;
  text-align: right;
  grid-area: 1 / 1 / 2 / 5;
}

button {
  cursor: pointer;
  font-size: 2rem;
  background: none;
  border: 1px solid #555;
  border-bottom: 6px solid #555;
}

button:hover {
  margin-top: 5px;
  border-bottom: 1px solid #555;
}

.number,
.decimal {
  background-color: #eee;
}

.red {
  background-color: rgb(253, 168, 168);
  border-color: rgb(107, 12, 12);
  color: rgb(107, 12, 12);
}

.blue,
.operator {
  background-color: rgb(168, 215, 253);
  border-color: rgb(12, 56, 107);
  color: rgb(12, 56, 107);
}

.equal {
  background-color: rgb(168, 253, 203);
  border-color: rgb(12, 107, 20);
  color: rgb(12, 107, 20);
}

.num1 {
  grid-area: 2 / 1 / 3 / 2;
}
.num2 {
  grid-area: 2 / 2 / 3 / 3;
}
.num3 {
  grid-area: 2 / 3 / 3 / 4;
}
.addition {
  grid-area: 2 / 4 / 3 / 5;
}
.num4 {
  grid-area: 3 / 1 / 4 / 2;
}
.num5 {
  grid-area: 3 / 2 / 4 / 3;
}
.num6 {
  grid-area: 3 / 3 / 4 / 4;
}
.subtraction {
  grid-area: 3 / 4 / 4 / 5;
}
.num7 {
  grid-area: 4 / 1 / 5 / 2;
}
.num8 {
  grid-area: 4 / 2 / 5 / 3;
}
.num9 {
  grid-area: 4 / 3 / 5 / 4;
}
.multiply {
  grid-area: 4 / 4 / 5 / 5;
}
.clear {
  grid-area: 6 / 1 / 7 / 2;
}
.backspace {
  grid-area: 5 / 1 / 6 / 2;
}
.num0 {
  grid-area: 5 / 2 / 7 / 3;
}
.equal {
  grid-area: 6 / 3 / 7 / 4;
}
.decimal {
  grid-area: 5 / 3 / 6 / 4;
}
.division {
  grid-area: 5 / 4 / 6 / 5;
}
.square {
  grid-area: 6 / 4 / 7 / 5;
}