body {
 background: linear-gradient(to right, rgb(228, 51, 231), rgb(92, 58, 228), rgb(228, 51, 231));
}

.calculator {
  display: grid;
  justify-content: center;
  align-content: center;
  grid-template-columns: repeat(4, 70px);
  grid-template-rows: minmax(80px, auto) repeat(5, 60px);
  margin-top: 10%;

}

.calculator > button {
  cursor: pointer;
  font-size: 2rem;
  border: 1px solid black;
  outline: black;
  border-radius: 5px;
}

.calculator > button:hover {
  background-color: rgba(255, 255, 255, .70);
}

.span-two {
  grid-column: span 2;
}

.result {
  grid-column: 1 / -1;
  background-color: rgba(62, 61, 57, .75);
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  padding: 12px;
    border-radius: 5px;
}


.result .current {
  color: white;
  font-size: 2.5rem;
}

.result .previous {
  color: rgba(255, 255, 255, .75);
  font-size: 1.5rem;
}