body {
  position: flex;
  flex-direction: column;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}





table {
  background-color: rgb(27, 3, 3);
  width: 100%;
  height: 55vh;
  color: rgb(218, 119, 26);
}

td {
  width: 20%;
  font-size: 30px;
  text-align: center;
  background-color: black;
  border-radius: 7px;
  cursor: pointer;
  user-select: none;
}

td:hover {
  background-color: rgb(122, 22, 22);
  
}
  
  
  
#InputBox {
  width: 100%;
  height: 20vh;
  background-color: rgb(32, 29, 29);
  font-size: 8vmax;
  overflow: auto;
  color: rgb(218, 119, 26);
  display: flex;
  scroll-behavior: auto;
  text-align: center;
  justify-content: flex-end;
  box-sizing: border-box;
}
#ResultBox {
  width: 100%;
  height: 25vh;
  background-color: rgb(48, 42, 42);
  font-size: 10vmax;
  overflow: auto;
  scroll-behavior: auto;
  color: rgb(97, 151, 15);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding-top: 5px;
  box-sizing: border-box;
}
#buttonAddition:hover {
  background-color: plum;
}
#buttonMultiplication:hover {
  background-color: rgb(121, 56, 33);
}
#buttonDivision:hover {
  background: rgb(109, 109, 2);
}
#buttonEqual {
  background-color: green;
}
#buttonSubstraction:hover {
  background: rgb(5, 87, 87);
}
#buttonParanthese {
  background: white;
}
#buttonC:hover {
  background-color: rgb(154, 103, 8);
}
#buttonDEL:hover {
  background: rgb(129, 2, 2);
}

.clickFeedback:hover {
  background: rgb(2, 110, 2);
  transition: 200ms;
}