index.css

.numbers {
  background-color: rgb(187, 176, 141);
  color: black;
  font-size: x-large;
  margin: 1%;
  border-radius: 20%;
  height: 5vh;
  font-weight: 500;
}

.operators {
  background-color: rgb(85, 115, 122);
  color: white;
  font-size: x-large;
  font-weight: 500;
  margin: 1%;
  border-radius: 20%;
  height: 5vh;
}

.operators:hover,
.numbers:hover {
  background-color: rgb(143, 89, 194);
  color: white;
}

.buttons {
  border: 1px solid;
  border-radius: 20%;
  display: grid;
  grid-template-columns: repeat(4, 20%);
  gap: 5%;
  overflow: hidden;
  padding: 5% 10% 10% 10%;
}

.textArea {
  padding: 2%;
  height: 10vh;
}

#display {
  width: 100%;
  height: 100%;
  font-size: large;
  font-weight: 300;
  border-radius: 10%;

}

.calculator {
  justify-content: center;
  background-color: rgb(75, 75, 65);
  margin: 10%;
  border-radius: 10%;
}