body {
  height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: right;
  background-color: white;
  color: black;
  touch-action: none;
}

.calculator {
  width: 315px;
  background-color: silver;
  padding: 8px;
  font-family: monospace;
  font-size: 51px;
  border: 1px solid black;
  border-radius: 8px;
  box-shadow: 0px 16px 32px 8px hsl(0 0 0 / 32%);
}

#display {
  background-color: gainsboro;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#display,
button {
  padding: 6px 16px 6px 16px;
  border: 1px solid black;
  border-radius: 4px;
}

button {
  flex: 1;
  background-color: lightblue;
  color: black;
}

.operator {
  background-color: lightgreen;
}

.delete,
.clear {
  background-color: lightcoral;
}

#container {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.first-row,
.second-row,
.third-row,
.fourth-row,
.fifth-row {
  display: flex;
  gap: 2px;
}

.delete,
.clear,
.zero,
.decimal {
  flex: 1.965;
}