:root {
  --key-size: 60px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  min-height: calc(100vh - 100px);
  background-color: #ebeff2;
}

.calculator {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: 100px repeat(5, auto);
  gap: 1px;
  width: 100%;
  height: calc(100vh - 100px);
  background-color: #c7efff;
  box-shadow: 0px 0px 100px -20px #85a7b9;
}
.calculator__screen {
  padding: 15px;
  grid-column: 1/5;
  grid-row: 1/2;
  background: rgb(120, 144, 156);
  background: linear-gradient(130deg, rgb(120, 144, 156) 0%, rgb(158, 179, 190) 100%);
}
.calculator__key {
  text-align: center;
  align-content: center;
  color: #353a3d;
  font-size: 25px;
  font-family: "Ubuntu Sans", sans-serif;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: #ffffff;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.15s;
}
.calculator__key--func {
  color: #4a6672;
  background-color: #eff1f3;
}
.calculator__key--equels {
  color: white;
  background-color: #ff6567;
}

#calculator-result {
  font-size: 22px;
  font-weight: 700;
}

#calculator-result, #calculator-inputfield {
  margin: 0;
  color: white;
  text-align: right;
  font-family: "Ubuntu Sans", sans-serif;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
}

@media only screen and (min-width: 400px) {
  .calculator {
    grid-template-columns: repeat(4, var(--key-size));
    grid-template-rows: 100px repeat(5, var(--key-size));
    width: initial;
    height: initial;
  }
  .calculator__key {
    font-size: 20px;
  }
  .calculator__key:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 6px 2px rgb(210, 210, 210);
  }
}