@font-face {
  font-family: "digital";
  src: url("fonts/digital-7.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "roboto";
  src: url("fonts/Roboto-Medium.ttf");
  font-weight: normal;
  font-style: normal;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    90deg,
    rgba(0, 174, 254, 235),
    rgba(0, 255, 109, 255)
  );
}

.calculator {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(241, 252, 251, 255);
  width: fit-content;
  height: 600px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1.1fr repeat(5, 1fr);
  grid-template-areas:
    "disp disp disp disp"
    "ac ac del div"
    "one two three mult"
    "four five six plus"
    "seven eight nine minus"
    "dot zero eq eq";
  grid-gap: 3px;
}

.display {
  grid-area: disp;
  background: rgba(0, 54, 45, 255);
  color: white; /******** CHANGE ********/
  font-family: "digital";
  font-size: 4rem;
  text-align: end;
  vertical-align: middle;
  line-height: 100px;
}

.operation {
  color: rgba(0, 255, 109, 255);
  font-size: 3rem;
}

.btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
  border: none;
  padding: 1rem 2rem;
  margin: 0;
  text-decoration: none;
  background: rgba(191, 244, 237, 255);
  cursor: pointer;
  font-family: "roboto";
  font-size: 1.4rem;
  transition: ease-in 0.1s;
}

.btn:hover {
  background: rgba(255, 255, 255, 0);
}

.btn:active {
  box-shadow: rgb(50 50 93 / 25%) 0px -4px 1px -21px inset,
    rgb(0 0 0 / 30%) 0px 4px 15px -7px inset;
  text-shadow: ;
}

.btn--equals {
  background: rgba(230, 252, 246, 255);
}