style.css

#calcContainer {
  width: 400px;
  background: rgb(62,75,77);
  background: linear-gradient(48deg, rgba(62,75,77,1) 0%, rgba(99,99,111,1) 50%, rgba(62,75,77,1) 100%);
  box-shadow: 1px 1px 5px black;
  border-radius: 30px;
  padding: 20px;
}
#display {
  font-family: 'VT323', monospace;
  font-size: 4rem;
  color: black;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: rgb(196,196,205);
  background: linear-gradient(25deg, rgba(196,196,205,1) 0%, rgba(230,230,231,1) 50%, rgba(196,196,205,1) 100%);
  border: 2px solid black;
  border-radius: 15px;
  padding: 10px;
}
#calcName {
  display: flex;
  justify-content: flex-end;
  color: white;
  font-family: 'VT323', monospace;
}
#keys {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 0.5em;
}
#keys > button {
  font-family: 'Roboto Mono', monospace;
  font-size: 2rem;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.opKey, #clear, #decimal {
  background: teal;
  color:white;
}
.numKey {
  background: white;
  color: black;
}
#calc {
  background: orangered;
  color: white;
}