/* Font */
* {
  font-family: "Roboto", sans-serif;
  font-size: 22px;
}

h1 {
  font-size: 50px;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.calculator {
  display: flex;
  flex-direction: column;
  align-content: center;
  border: 1px solid rgb(79, 79, 79);
  max-width: 545px;
  padding: 10px;
}

#display {
  padding: 10px;
}

/* Pad */
.pad {
  display: flex;
  flex-direction: row;
  flex: 1 1 0%;
}

/* NumberPad */
.numberPad {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
}

.numberPad div {
  display: flex;
  flex-direction: row;
  flex: 1 1 0%;
}

.miscPad,
.operatorPad {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
}

/* Buttons */
button {
  border: 1px solid #cfcfcf;
  border-radius: 10px;
  margin: 5px;
  flex: 1 1 0%;
  padding: 10px;
  max-height: 55px;
  min-width: 100px;
  /* text-size-adjust: ; */
}

button:hover {
  filter: brightness(125%);
}

.operatorPad button {
  background-color: #ffff66;
}

#dotButton {
  background-color: aquamarine;
}

#clrButton,
#backspaceButton {
  background-color: #ff6666;
}

#equalButton {
  flex: 2 1 0%;
  background-color: #00ff00;
}