body {
  font-family: 'Open Sans', sans-serif;
  background-color: black;
}
#container {
  width: 1000px;
  height: 550px;
  background-image: url(bgimg2.jpg);
  margin: 20px auto;
}
#calculator {
  width: 320px;
  height: 520px;
  background-color: #4e4e4e;
  margin: 0px auto;
  top: 20px;
  position: relative;
  border-radius: 5px;
  box-shadow:   9px 7px 8px 0 rgb(0 0 0 / 83%), 0 6px 20px 0 rgb(0 0 0 / 72%);
}
#result {
  height: 120px;
  #background-color: rgb(0 0 0 / 70%);
  border-radius: 5px;
  position: relative;
  top: 15px;
  margin:10px;

}
#keyboard {
  height: 400px;
}
#history {
  text-align: right;
  height: 20px;
  margin: 0 20px;
  padding-top: 20px;
  font-size: 15px;
  color: #c7c7c7;
}
#output {
  text-align: right;
  height: 60px;
  margin: 10px 20px;
  font-size: 30px;

}
#output-value {
  color: white;
}
.operator, .number, .empty {
  width: 50px;
  height: 50px;
  margin: 15px;
  float: left;
  border-radius: 50%;
  border-width: thin;
  font-weight: bold;
  font-size: 15px;
}
.number, .empty {
    #background-color: #9e9e9e5c;
}
.number, .operator{
  cursor: pointer;
}
.number:active, .operator:active{
  font-size: 13px;
}
.number:focus, .operator:focus {
  outline: 0;
}
button:nth-child(4){
  font-size: 20px;
  background-color: #20b2aa;
}
button:nth-child(8){
  font-size: 20px;
  background-color: #ffa500;
}button:nth-child(12){
  font-size: 20px;
  background-color: #f08080;
}button:nth-child(16){
  font-size: 20px;
  background-color: #7d93e0;
}button:nth-child(20){
  font-size: 20px;
  background-color: #9477af;
}