html, body {
  height: 100%;
  width: 100%;
}

.calc-container {
  display: grid;
  grid-template-columns: repeat(1fr, 4);
  gap: 20px;
  
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

.calc-display {
  grid-column: span 4;
  border: 1px solid gray;
  width: 100%;
  height: 32px;
}

.calc-button {
  border: 1px solid gray;
  text-align: center;
  padding: 4px;
}

.calc-button--operator {
  background-color: #dddddd;
}

.calc-button--equal {
  grid-row: span 4;
}

.calc-button--zero {
  grid-column: span 2;
}