body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#container {
  width: 20em;
  height: 40em;
  border-radius: 1.25rem;
  background: linear-gradient(180deg, #2c2c2c 0%, rgba(0, 0, 0, 0.86) 100%);
}

#resultBox {
  position: relative;
  left: 40px;
  width: 50%;
  height: 16rem;
  font-family: "Lucida Sans Unicode";
  text-align: right;
  border: none;
  top: 120px;
}

.current {
  width: 250px;
  color: #f9f9f9fc;
  background-color: #25252500;
}

.previous {
  width: 250px;
  font-size: 20px;
  color: #c1c1c18c;
  background-color: #25252500;
}
.parent {
  position: relative;
  left: 30px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 18px;
  grid-row-gap: 18px;
}

button {
  border: none;
  border-radius: 12px;
}

.numBtn {
  background-color: #3d3d3d;
  color: #47a6ff;
  width: 52px;
  height: 52px;
  font-size: 25px;
}

.numBtn:hover {
  background-color: hsla(0, 0%, 40%);
  cursor: pointer;
}

.operatorBtn {
  background-color: #0078e8;
  color: #7ae7ff;
  width: 52px;
  font-size: 25px;
}

.operatorBtn:hover {
  background-color: rgb(37, 157, 255);
  cursor: pointer;
}

#btnClear {
  grid-area: 1 / 1 / 2 / 3;
  background-color: #737373;
  color: #d8d8d8;
  font-size: 25px;
}

#btnDel {
  grid-area: 1 / 3 / 2 / 4;
  background-color: #737373;
  color: #d8d8d8;
  font-size: 18px;
  font-weight: 540;
}

#btnClear:hover {
  background-color: rgb(120, 62, 62);
  cursor: pointer;
}

#btnDel:hover {
  background-color: rgb(145, 106, 78);
  cursor: pointer;
}

#equalBtn {
  background-color: #0078e8;
  color: #7ae7ff;
  font-size: 25px;
}

#equalBtn:hover {
  background-color: rgb(37, 157, 255);
  cursor: pointer;
}

#btn9 {
  grid-area: 2 / 1 / 3 / 2;
}

#btn0 {
  grid-area: 5 / 1 / 6 / 2; /* rowStart/ colStart/ rowEnd / colEnd*/
}

#btn8 {
  grid-area: 2 / 2 / 3 / 3;
}
#btn6 {
  grid-area: 3 / 1 / 4 / 2;
}
#btn5 {
  grid-area: 3 / 2 / 4 / 3;
}
#btn3 {
  grid-area: 4 / 1 / 5 / 2;
}
#btn2 {
  grid-area: 4 / 2 / 5 / 3;
}
#btn1 {
  grid-area: 4 / 3 / 5 / 4;
}
#btn4 {
  grid-area: 3 / 3 / 4 / 4;
}
#btn7 {
  grid-area: 2 / 3 / 3 / 4;
}
#btnDiv {
  grid-area: 1 / 4 / 2 / 5;
}
#btnDot {
  grid-area: 5 / 2 / 6 / 3;
}
#btnMultiply {
  grid-area: 2 / 4 / 2 / 5;
}
#btnPlus {
  grid-area: 3 / 4 / 4 / 5;
}

#btnMin {
  grid-area: 4 / 4 / 5 / 5;
}

#equalBtn {
  grid-area: 5 / 3 / 6 / 5;
}