* {
  color: #f0e0d0;
  font-family: "Cascadia Mono", sans-serif;
  font-weight: 900;
  text-shadow: 1px 1px 2px black;
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

#calculator {
  margin: auto;
  display: flex;
  flex-direction: column;
  width: 350px;
  padding: 10px;
  border: 1px solid #8d6e63;
  border-radius: 8px;
  background-color: #252628;
  box-sizing: border-box;
}

#evaluationDisplay,
#resultDisplay {
  height: 2rem;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #8d6e63;
  background-color: #1b1c1e;
  font-size: 1.2em;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

#resultDisplay {
  font-size: 1.5rem;
}

#calculatorButtons {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

#digits {
  display: flex;
  flex-wrap: wrap;
  flex: 3;
  gap: 5px;
}

#digits button {
  flex: 1 0 calc(33.33% - 10px);
  height: 3.5rem;
  margin-bottom: 5px;
  font-size: 1.5em;
  border-radius: 12px;
  border: 1px solid #6f4e37;
  background-color: #533d28;
}

#operators {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 5px;
}

#operators button {
  flex: 1;
  height: 3.5rem;
  font-size: 1.5em;
  border-radius: 12px;
  border: 1px solid #f6c37d;
  background-color: #f1af60;
}

#bigOperators {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 5px;
}

#bigOperators button {
  flex: 1;
  height: 7rem;
  font-size: 1.8em;
  border-radius: 10px;
  border: 1px solid #f6c37d;
  background-color: #f1af60;
}

#bigOperators .evaluator {
  background-color: salmon;
  border: 1px solid rgb(255, 165, 155);
}

#digits button:hover,
#operators button:hover,
#bigOperators button:hover {
  background-color: #e0e0e0;
}