body {
  background-color: lightseagreen;
}

#calculator {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 10px;
  height: 600px;
  width: 400px;
  background-color: black;
  border: 3px solid goldenrod;
  outline: 5px solid black;
  border-radius: 4px;
}

#display {
  display: flex;
  align-items: end;
  justify-content: end;
  padding: 5px;
  font-size: 48pt;
  font-family: 'Courier New', Courier, monospace;
  box-sizing: border-box;
  height: 100px;
  background-color: grey;
  border: 2px solid black;
  border-radius: 10px;
}

#button-grid {
    display: flex;
    flex-wrap: wrap;
  }

button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28pt;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  border-radius: 20px;
}

.double {
  display: flex;
  flex-grow: 2;
}

.clear, .percent, .sign {
  background-color: rgb(114, 114, 167);
}

.number, .decimal {
  background-color: rgb(115, 179, 115);
}

.operator{
    background-color: goldenrod;
    font-weight: bold;
}

.equals {
  /* background-color: rgb(206, 125, 138); */
  background-color: rgb(231, 87, 159);
}