style.css

* {
  font-family: Roboto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font: bold 14px Arial, sans-serif;
}
html {
  height: 100%;
  background: white;
  background: radial-gradient(circle, #fff 20%, #ccc);
  background-size: cover;
}
#calculator {
  background: #c4c4c4;
  width: 262px;
  height: auto;
  margin: 100px auto;
  padding: 10px 10px 10 px -10px;
  border-radius: 2px;
  box-shadow: 0px 4px #939393;
}
.top .screen {
  height: 64px;
  width: 300px;
  float: right;
  padding: 0 10px;
  background: #616161;
  border-radius: 1px;
  box-shadow: inset 0px 2px rgba(0, 0, 0, 0.2);

  /* Typography */
  font-size: 17px;
  line-height: 65px;
  color: #b3b3b3;
  text-shadow: 1px 1px px rgba(0, 0, 0, 0.2);
  text-align: right;
  letter-spacing: 1px;
}
.keys,
.top {
  overflow: hidden;
}

.keys span,
.top span {
  float: left;
  position: relative;
  top: 2px;
  left: 2px;
  cursor: pointer;
  width: 63px;
  height: 61px;
  background: #9e9e9e;
  border-radius: 1px;
  box-shadow: 0px 4px #c4c4c4;
  margin: 0 2px 2px 0;

  color: #616161;
  line-height: 60px;
  text-align: center;

  user-select: none;
  transition: all 0.2s ease;
}
span.eval {
  height: 125px;
  text-align: center;
  line-height: 120px;
  margin-bottom: 5px;
  /* flex: none; */
  /* padding-bottom: 2px; */
}
span.zero {
  width: 128px;
  margin-top: -66px;
  flex: none;
}
span.point {
  margin-top: -66px;
  margin-left: 130px;
}
.keys span:hover {
  background: #ffeb3c;
  box-shadow: 0px 1px #776f29;
}
.keys span:active {
  box-shadow: 0px 0px #ffeb3c;
  top: 4px;
}