* {
  font-family: Helvetica, sans-serif;
  font-weight: 100;
  color: white;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: black;
}

p {
  margin: 0;
}

.heading {
  text-align: center;
}

.foot {
  margin: 50px;
}

.calc {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background-color: #2a2a2a;
}
.calc__display {
  text-align: right;
  min-width: 100%;
  max-width: inherit;
}
.calc__display__text {
  margin: 1rem;
  font-size: 3rem;
}
.calc__input {
  font-size: 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: "ac pm pct dv" "sev eight nine mlt" "four five six minus" "one two three plus" "zer zer pt equ";
  gap: 2px;
}
.calc__input__btn {
  text-align: center;
  padding: 1rem;
  cursor: pointer;
}
.calc__input__btn:active {
  background-color: white;
}
.calc__input__btn--special {
  background-color: #3f3f3f;
}
.calc__input__btn--ops {
  background-color: #fd8d0e;
}
.calc__input__btn--nums {
  background-color: #5f5f5f;
}
.calc__input__btn--dot {
  background-color: #5f5f5f;
}

#ac {
  grid-area: ac;
}

#pm {
  grid-area: pm;
}

#pct {
  grid-area: pct;
}

#dv {
  grid-area: dv;
}

#mlt {
  grid-area: mlt;
}

#min {
  grid-area: minus;
}

#plus {
  grid-area: plus;
}

#equ {
  grid-area: equ;
}

#dot {
  grid-area: pt;
}

#nine {
  grid-area: nine;
}

#eight {
  grid-area: eight;
}

#seven {
  grid-area: sev;
}

#six {
  grid-area: six;
}

#five {
  grid-area: five;
}

#four {
  grid-area: four;
}

#three {
  grid-area: three;
}

#two {
  grid-area: two;
}

#one {
  grid-area: one;
}

#zero {
  grid-area: zer;
}