body { margin: 0; padding: 0; }
*, *::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.container { position: fixed; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.content { padding: 30px; border-radius: 15px; background-color: #bbb; border: 4px solid #999; border-bottom: 6px solid #888; border-top: 2px solid #aaa; }
.calculator { text-align: center; margin: 0 auto; max-width: 100%; width: 400px; display: flex; flex-wrap: wrap; }
.result { width: calc(100% - 10px); margin: 5px 5px 15px; background-color: #cde; outline: 1px solid #bcd; text-align: right; padding: 15px; }
.button {
  width: calc(25% - 10px);
  margin: 5px;
  padding: 15px;
  background-color: #eee;
  outline: 1px solid #ccc;
  user-select: none;
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
}
.button:hover {
  background-color: #ddd;
}
.op { background-color: #ddd; outline-color: #bbb; }
.op:hover { background-color: #ccc; }
.equals { background-color: #09f; color: #fff; outline-color: #07d; }
.equals:hover { background-color: #08e; }