.numberPad {
  font-family: brandon-grotesque-medium, sans-serif;
  color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.numberPad .row {
  display: flex;
  width: 600px;
  justify-content: space-between;
}
@media (max-width: 1443px) {
  .numberPad .row {
    width: 450px;
  }
}
@media (max-width: 1280px) {
  .numberPad .row {
    width: 396px;
  }
}
@media (max-width: 1024px) {
  .numberPad .row {
    width: 318px;
  }
}
.numberPad .numberButton {
  display: flex;
  background-color: white;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 110px;
  font-size: 40px;
  border-radius: 20px;
}
@media (max-width: 1443px) {
  .numberPad .numberButton {
    width: 90px;
  }
}
@media (max-width: 1280px) {
  .numberPad .numberButton {
    width: 79.2px;
  }
}
@media (max-width: 1024px) {
  .numberPad .numberButton {
    width: 63.6px;
  }
}
@media (max-width: 1443px) {
  .numberPad .numberButton {
    height: 82.5px;
  }
}
@media (max-width: 1280px) {
  .numberPad .numberButton {
    height: 70.4px;
  }
}
@media (max-width: 1024px) {
  .numberPad .numberButton {
    height: 78.1px;
  }
}
@media (max-width: 1443px) {
  .numberPad .numberButton {
    font-size: 30px;
  }
}
@media (max-width: 1280px) {
  .numberPad .numberButton {
    font-size: 25.6px;
  }
}
@media (max-width: 1024px) {
  .numberPad .numberButton {
    font-size: 28.4px;
  }
}
@media (max-width: 1443px) {
  .numberPad .numberButton {
    border-radius: 15px;
  }
}
@media (max-width: 1280px) {
  .numberPad .numberButton {
    border-radius: 12.8px;
  }
}
@media (max-width: 1024px) {
  .numberPad .numberButton {
    border-radius: 14.2px;
  }
}
.numberPad .numberButton.depressed {
  background-color: lightgray;
  transform: translate(3px, 3px);
}