/* calc.js */
#output {
  height: 130px;
  width: 320px;
  border: solid 0.5px #3d3535;
  background-color: #fff;
  text-align: end;
}

.display-proc-container {
  position: relative;
  /* margin-right: 5px; */
  transform: rotateX(180deg);
  max-width: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
}

#display-proc {
  display: inline-block;
  opacity: 0.6;
  margin: 2px 5px;
  transform: rotateX(180deg);
  white-space: nowrap;
  font-size: 1.3rem;
  color: #000;
}

#display-ans {
  margin: 0 5px;
  font-size: 1.7rem;
  word-wrap: break-word;
  color: #000;
}

#btn-container {
  display: grid;
  grid-template-columns: repeat(4, 80px);
  grid-template-rows: repeat(5, 80px);
}

#btn-container > button {
  font-size: 1.4rem;
  padding: 0;
  margin: 0;
  border: solid 0.5px #3d3535;
  background-color: aliceblue;
  cursor: pointer;
}

/* button className */
#btn-container > button[data-all-clear] {
  background-color: #fdd0c4;
}

#btn-container > button[data-delete] {
  background-color: #f9fdc4;
}

#btn-container > button[data-operation] {
  background-color: #c4fdd2;
}

#btn-container > button[data-equal] {
  background-color: #c4fdfa;
}

/* #btn-container > button[data-navigation] {
  background-color: #ebc4fd;
} */

/* button onclick className */
#btn-container > .clicked-clear {
  background-color: #fca48c !important;
}

#btn-container > .clicked-del {
  background-color: #f0f878 !important;
}

#btn-container > .clicked-reg {
  background-color: rgb(109, 183, 248) !important;
}

#btn-container > .clicked-equal {
  background-color: #77f5ef !important;
}

#btn-container > .clicked-operation {
  background-color: #6af58d !important;
}

/* #btn-container > .clicked-navigate {
  background-color: #ce6efa !important;
} */

/* Calculator info Styling */
.calculator-info-container {
  margin: 0 40px 50px 40px;
  text-indent: 6%;
  line-height: 1.9rem;
}

@media screen and (max-width: 900px) {
  .calculator-info-container {
    margin: 0 0 20px 0;
  }
}