* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: 'Courier New', Courier, monospace;
}

.box {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border: black solid 2px;
  margin: 100px auto;
}

.box .screen {
  width: 100%;
  height: 100px;
  border-bottom: black solid 2px;
}

.box .screen input {
  background-color: #c4e7fd;
  font-weight: bold;
}

.box .screen input {
  height: 100%;
  width: 100%;
  font-size: 32px;
}

.box .buttons {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
  -ms-grid-rows: (1fr)[5];
      grid-template-rows: repeat(5, 1fr);
}

.box .buttons button {
  height: 70px;
  width: 100px;
  font-weight: bold;
  background-color: white;
  font-size: 24px;
}

.box .buttons button:hover {
  background-color: lightgray;
}

.box .buttons .clickedButton {
  background-color: orange;
}

.box .buttons .clickedButton:hover {
  background-color: orange;
}

.box .buttons #equal {
  background-color: #3d90d4;
}

.box #equal {
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-column: 2/4;
  width: 100%;
}
/*# sourceMappingURL=style.css.map */