* {
  margin: 0;
  border-radius: 8px;
  box-sizing: border-box;
  font-family: "Quicksand", sans-serif;
}

body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.calculatorBody {
  background-color: #334155;
  height: 560px;
  width: 400px;
  padding: 12px;
  display: grid;
  grid-template-rows: 1fr 3fr;
}

.calculatorDisplay {
  font-size: 4em;
  color: #f1f5f9;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.calculatorButtons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 12px;
}

.buttonPart1 {
  grid-row: 1;
  grid-column: 1/-1;

  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
}

.buttonPart2 {
  grid-row: 2/-1;
  grid-column: 1/-2;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 12px;
}

.buttonPart3 {
  grid-row: 2/-1;
  grid-column-end: auto;

  display: grid;
  grid-template-rows: 1fr 1fr 2fr;
  gap: 12px;
}

.button,
#allClear,
#backspace {
  background-color: #94a3b8;
  color: #f1f5f9;
  font-size: 2.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: border 0.015s ease;
}

.button:hover {
  filter: brightness(1.2);
}

.button:active {
  border: 3px solid #334155;
}

#allClear {
  background-color: #f87171;
}

.equals {
  background-color: #34d399;
}

.operator {
  background-color: #fbbf24;
}