body {
  display: flex;
  justify-content: center;
  background-image: linear-gradient(300deg, white, rgb(169, 244, 169));
}
.container {
  display: grid;
  grid-template-columns: repeat(5, auto);
  border-radius: 20px;
  padding: 2em;
}
.items {
  width: 2.5em;
  height: 2.5em;
  margin: 0.2em;
  border-radius: 50px;
  border: none;
  font-size: 35px;
  background-image: linear-gradient(to right, rgb(177, 241, 220), white);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.items:hover {
  background-color: rgb(163, 227, 195);
  background-image: linear-gradient(to right, rgb(12, 214, 113), white);
  cursor: pointer;
  box-shadow: 1px 1px 4px 1px gray;
}
.eql {
  grid-column: span 2;
  width: auto;
  border-radius: 20px;
  background-image: linear-gradient(to right, rgb(114, 176, 247), white);
}
.eql:hover {
  background-image: linear-gradient(to right, rgb(10, 105, 213), white);
}
.Aclear {
  background-image: linear-gradient(120deg, rgb(212, 70, 70), white);
}
.Aclear:hover {
  background-image: linear-gradient(120deg, red, white);
}
.clear {
  background-image: linear-gradient(120deg, rgb(3, 182, 182), white);
}
.clear:hover {
  background-image: linear-gradient(120deg, rgb(0, 255, 255), white);
}
.on {
  background-image: linear-gradient(120deg, rgb(247, 164, 56), white);
}
.on:hover {
  background-image: linear-gradient(120deg, rgb(184, 115, 24), white);
}

#wrap {
  background-image: linear-gradient(lightgreen, white, lightgreen);
  border-radius: 20px;
  box-shadow: 2px 2px 3px 2px rgb(18, 17, 17);

  display: flex;
  flex-direction: column;
}
#display {
  text-align: right;
  padding: 1.5em;
  margin: 1em 1em 0em 1em;
  border-radius: 20px;
  margin-top: 1em;
  font-size: 20px;
  border: none;
}