* {
  font-size: 40px;
  font-weight: bold;
}

#calculator {
  border: 2px lightgray solid;
  border-radius: 5px;
  width: 70vw;
  margin-left: 10%;
  margin-right: 10%;
  background-color: #F9FAFB;
}

#display {
  margin: 20px 20px 5px 20px;
  width: 87%;
  height: 8%;
  border: 5px dodgerblue solid;
  border-radius: 4px;
  text-align: right;
  background-color: #ECECEC;
}

#button_container {
  margin: 25px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  width: 70px;
  height: 70px;
  margin: 5px;
  background-color: rgba(200, 180, 150, 0.5);
  border: 2px transparent solid;
  border-radius: 8px;
  /* color: #FFD6B3; */
}

.btn:hover {
  background-color: rgba(200, 180, 150, 0.8);
}

.operator {
  background-color: rgb(0, 230, 0, 0.5);
}

.operator:hover {
  background-color: rgb(0, 230, 0, 0.6);
}

#clearButton {
  background-color: rgba(255, 0, 0, 0.5);
}

#clearButton:hover {
  background-color: rgba(255, 0, 0, 0.6);
}

#evalButton {
  width: 100%;
  background-color: rgba(0, 0, 255, 0.5);
}

#evalButton:hover {
  background-color: rgba(0, 0, 255, 0.6);
}