/* Calculator css style sheet */

button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px 2px rgba(148, 148, 148, 1);
  color: white;
}

#container {
  height: 600px;
  width: 500px;
  text-align: center;
  margin: 0 auto;
  box-shadow: 0px 0px 17px 6px rgba(148, 148, 148, 1);
  background-color: #cfc7bb;
  margin-top: 100px;
  border-radius: 8px;
  padding-top: 20px;
}

#calc-display {
  font-family: monospace;
  font-size: 50px;
  border: 1px solid rgb(109, 109, 109);
  background-color: #e6f3e2;
  width: 430px;
  height: 150px;
  text-align: center;
  margin: 0 auto;
  border-radius: 7px;
  box-shadow: inset 0px 0px 9px 0px #767f74;
  text-align: right;
  padding-right: 10px;
}

#button-container {
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-template-columns: repeat(4, auto);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  width: 430px;
  height: 400px;
  margin: 20px auto 0 auto;
}

#top-display {
  color: black;
  height: 75px;
}

#bottom-display {
  color: dimgray;
  height: 75px;
}

#clr-button {
  grid-column-start: 1;
  grid-column-end: 3;
  background-color: hsl(37, 77%, 62%);
  border: 1px solid rgba(189, 149, 85);
}

#clr-button:hover {
  background-color: hsl(37, 97%, 69%);
}

#del-button {
  grid-column-start: 3;
  grid-column-end: 5;
  background-color: rgb(197, 101, 116);
  border: 1px solid rgb(156, 92, 101);
}

#del-button:hover {
  background-color: hsl(351, 70%, 58%);
}

.num-button {
  background-color: hsl(219, 21%, 24%);
  border: 1px solid rgb(31, 37, 48);
}

.num-button:hover {
  background-color: hsl(220, 21%, 37%);
}

.operator {
  background-color: hsl(209, 14%, 43%);
  border: 1px solid rgb(84, 99, 112);
}

.operator:hover {
  background-color: hsl(209, 34%, 63%);
}