html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  overflow: hidden;
}

.calculator {
  display: grid;
  grid-template-columns: 54px 54px 54px 54px;
  grid-template-rows: 54px 54px 54px 54px 54px 54px;
  justify-content: center;
  align-content: center;
  padding: 100px 50px;
  background-color: black;
  grid-gap: 7px;
  font-family: Helvetica;
  color: white;
  transform: scale(1.7);
  transition-duration: 1s;
}

@media only screen and (max-width: 700px) {
  .calculator {
    transform: scale(2.5);
  }
  button {
    font-size: 20px;
  }
  .multiply,
  .divide,
  .minus,
  .plus,
  .equal {
    font-size: 20px;
  }
}

button {
  border: none;
  border-radius: 30px;
  font-size: 20px;
  text-align: center;
  outline: none;
  color: white;
  transition-duration: 0.3s;
}

.display {
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 5;
  text-align: right;
  margin: 7px;
  font-size: 40px;
}

.reset {
  grid-row-start: 2;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 1;
  color: black;
  background-color: #a5a5a5;
}
.reset:active {
  background-color: #d9d9d9;
}

.swap {
  grid-row-start: 2;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 2;
  color: black;
  background-color: #a5a5a5;
}
.swap:active {
  background-color: #d9d9d9;
}

.square {
  grid-row-start: 2;
  grid-row-end: 2;
  grid-column-start: 3;
  grid-column-end: 3;
  color: black;
  background-color: #a5a5a5;
}
.square:active {
  background-color: #d9d9d9;
}

.divide {
  grid-row-start: 2;
  grid-row-end: 2;
  grid-column-start: 4;
  grid-column-end: 4;
  background-color: #f1a33c;
  font-size: 30px;
}

.divide:active {
  background-color: #f3c995;
}

.seven {
  grid-row-start: 3;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 1;
  background-color: #333333;
}
.seven:active {
  background-color: #737373;
}
.eight {
  grid-row-start: 3;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 2;
  background-color: #333333;
}
.eight:active {
  background-color: #737373;
}

.nine {
  grid-row-start: 3;
  grid-row-end: 3;
  grid-column-start: 3;
  grid-column-end: 3;
  background-color: #333333;
}
.nine:active {
  background-color: #737373;
}

.multiply {
  grid-row-start: 3;
  grid-row-end: 3;
  grid-column-start: 4;
  grid-column-end: 4;
  background-color: #f1a33c;
  font-size: 30px;
}

.multiply:active {
  background-color: #f3c995;
}

.four {
  grid-row-start: 4;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 1;
  background-color: #333333;
}
.four:active {
  background-color: #737373;
}
.five {
  grid-row-start: 4;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 2;
  background-color: #333333;
}
.five:active {
  background-color: #737373;
}
.six {
  grid-row-start: 4;
  grid-row-end: 4;
  grid-column-start: 3;
  grid-column-end: 3;
  background-color: #333333;
}
.six:active {
  background-color: #737373;
}
.minus {
  grid-row-start: 4;
  grid-row-end: 4;
  grid-column-start: 4;
  grid-column-end: 4;
  background-color: #f1a33c;
  font-size: 30px;
}
.minus:active {
  background-color: #f3c995;
}

.one {
  grid-row-start: 5;
  grid-row-end: 5;
  grid-column-start: 1;
  grid-column-end: 1;
  background-color: #333333;
}

.one:active {
  background-color: #737373;
}

.two {
  grid-row-start: 5;
  grid-row-end: 5;
  grid-column-start: 2;
  grid-column-end: 2;
  background-color: #333333;
}
.two:active {
  background-color: #737373;
}

.three {
  grid-row-start: 5;
  grid-row-end: 5;
  grid-column-start: 3;
  grid-column-end: 3;
  background-color: #333333;
}
.three:active {
  background-color: #737373;
}

.plus {
  grid-row-start: 5;
  grid-row-end: 5;
  grid-column-start: 4;
  grid-column-end: 4;
  background-color: #f1a33c;
  font-size: 30px;
}
.plus:active {
  background-color: #f3c995;
}

.zero {
  grid-row-start: 6;
  grid-row-end: 6;
  grid-column-start: 1;
  grid-column-end: 3;
  background-color: #333333;
}

.zero:active {
  background-color: #737373;
}
.comma {
  grid-row-start: 6;
  grid-row-end: 6;
  grid-column-start: 3;
  grid-column-end: 3;
  background-color: #333333;
}
.comma:active {
  background-color: #737373;
}

.equal {
  grid-row-start: 6;
  grid-row-end: 6;
  grid-column-start: 4;
  grid-column-end: 4;
  background-color: #f1a33c;
  font-size: 30px;
}

.equal:active {
  background-color: #f3c995;
}