styles.css

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

.calculator {
  background-color: lightsalmon;
  border: 1px solid #ccc;
  border-radius: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
}

.output-screen {
  width: 100%;
  font-size: 5rem;
  height: 80px;
  border: none;
  background-color: lightgrey;
  color: #fff;
  text-align: center;
}

button {
  height: 60px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #c4c4c4;
  background-color: lightskyblue;
  font-size: 2rem;
  color: #333;
}

button:hover {
  background-color: #eaeaea;
}

.operator {
  color: black;
}

.clear {
  background-color: lightgreen;

  color: #fff;
}

.clear:hover {
  background-color: #f17377;
}

.calculate {
  background-color: lightgray;
  border-radius: 10%;
  color: #fff;
  height: 100%;
  grid-area: 2 / 4 / 6 / 5;
}

.calculate:hover {
  background-color: #4e9ed4;
}

.calculator-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  padding: 20px;
}