html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;

  color: white;
  font-family: "Menlo", sans-serif;
  font-size: 20px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.calculator {
  display: grid;
  grid-template-columns: repeat(5, 5em);
  grid-template-rows: repeat(5, 4em);
  background: #5a819e;
  text-align: center;
  cursor: default;
}

@media screen and (min-device-width: 320px) and (max-device-width: 800px) {
  .calculator {
    font-size: 2em;
  }
}

.result {
  grid-column: 2 / span 2;
  grid-row: 1 / 2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
  padding-right: 35px;
  padding-left: 15px;
  background: #6cc2bd;
  word-break: break-all;
}

.calculate {
  grid-column: 4 / span 2;
  grid-row: 5 / 5;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
  padding-right: 35px;
  padding-left: 15px;
  background: #6cc2bd;
  word-break: break-all;
}

.key {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.key.symbol {
  background-color: #ff9e74;
}

.key:active {
  background: #6da0c6;
}

.key.op {
  background: #fac0a7;
}

.key.op.special,
.key.clear.special {
  background: #f47d7d;
}

.key.op:active,
.key.op.special:active,
.key.clear.special:active {
  filter: brightness(85%);
}

.sign {
  display: inline-block;
  line-height: 3.5em;
}

.sup {
  font-size: 0.5em;
  position: relative;
  bottom: 0.5em;
}