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

body {
  box-sizing: border-box;
  color: rgb(30, 0, 0);
  background-color: #d1d0cf;
  font-family: "Heebo", "Lato", sans-serif;
}

/*CONTAINER*/
.container {
  min-height: 80vh;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

/*CALCULATOR*/
.calc {
  background-color: rgb(142, 142, 142);
  border-radius: 5px;
  box-shadow: 5px 10px 18px #888888;
  border: 0.5px solid black;

  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(6, 80px);
}

/*BUTTONS*/
button {
  font-size: 1.7rem;
  font-weight: bold;
}

/*display*/

.calc__display {
  font-size: 2.3rem;
  font-weight: bold;

  color: white;
  justify-self: right;
  padding: 1rem;

  grid-row: 1 / 2;
  grid-column: 1 / -1;
}

/*operators*/

.calc__operators {
  background-color: rgb(243, 138, 45);
  border: inherit;
  grid-column: 4 / -1;
}

#calc__operators--add {
  grid-row: 5 / 6;
}

#calc__operators--subtract {
  grid-row: 4 / 5;
}

#calc__operators--multiply {
  grid-row: 3 / 4;
}

#calc__operators--divide {
  grid-row: 2 / 3;
}

/*equal sign*/
.calc__equal--btn {
  background-color: rgb(243, 138, 45);
  border: inherit;
}

.calc__operators:hover,
.calc__equal--btn:hover {
  background-color: rgb(214, 122, 42);
}

/*Zero button*/
#calc__digit--0 {
  grid-column: 1 / 2;
  grid-row: 6 / -1;
}

/*Clear button*/
.calc__clear--btn {
  grid-row: 2 / 3;
  grid-column: 1 / 3;
}

.calc__backspace--btn {
  font-size: 2rem;
  grid-column: 3/ 4;
  grid-row: 6 / -1;
}