@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

body {
  font-family: 'Roboto', sans-serif;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.calc-btn {
  background-color: silver;
  color: black;
  width: 25px;
  height: 45px;
  border: 1px solid gray;
  text-align: center;
  cursor: pointer;
  font-size: 32px;
  font-weight: 100;
  padding-top: 3px;
}
.calc-btn:hover {
  background-color: orange;
}
.row {
  display: table;
  table-layout: fixed;
  width: 200px;
}
.column {
  display: table-cell;
}
#calc-zero {
  width: 52.66666667px;
  border-radius: 0 0 0 7px;
}
#calc-clear {
  width: 52.66666667px;
}
#calc-display-val {
  height: 80px;
  color: white;
  text-align: right;
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  font-size: 48px;
  background-color: #383838;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 7px 7px 0 0;
  padding: 12px;
}
.calc-btn-operator {
  background-color: orange;
  color: white;
}
h1 {
  text-align: center;
  margin-top: 50px;
}
#calc-equals {
  border-radius: 0 0 7px 0;
}
#calc-parent {
  margin-left: calc(50% - 100px);
}