@font-face {
  font-family: 'Digital-7';
  src: url("digital-7/digital-7.ttf") format("truetype");
  /* Credit goes to the font author, Sizenko Alexander */
  font-weight: normal; }
* {
  box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0; }

body {
  background-color: #e9d4b9;
  background-image: repeating-linear-gradient(45deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 120px, rgba(11, 36, 45, 0.5) 120px, rgba(11, 36, 45, 0.5) 140px), repeating-linear-gradient(135deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 140px, rgba(11, 36, 45, 0.5) 140px, rgba(11, 36, 45, 0.5) 160px); }

.container {
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 24px/1.5 "Source Code Pro", Monospace;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.6); }

.calculator {
  width: 300px;
  height: 456px;
  padding: 50px 30px 30px;
  background-image: linear-gradient(178deg, #464450, #5c5969 30%, #464450 50%);
  border-radius: 15px;
  border: 1px solid #222127;
  box-shadow: inset 0 1px 5px #2e2d34, inset 0 -3px 8px #2e2d34, inset 2px 0 5px #2e2d34, inset -3px 0 5px #2e2d34, 0 7px 30px 3px #2e2d34; }

.display-surround, .display, .btn-surround {
  box-shadow: inset 0 2px 2px #2e2d34, inset 2px 0 2px #2e2d34, 0 2px 2px #767387, 1px 0 2px #767387; }

.display-surround {
  width: 100%;
  padding: 10px;
  margin-bottom: 40px; }

.display {
  text-align: right;
  width: 100%;
  height: 42px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font: 32px/1.5 "Digital-7", "Source Code Pro", Monospace;
  color: #555;
  background-image: linear-gradient(-57deg, #d6e1e3, white 70%, #d6e1e3 97%); }
  .display p {
    margin: 0; }

.row {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-bottom: 10px; }

.btn-surround {
  padding: 2px;
  border-radius: 3px;
  width: calc(48px + 4px); }

.btn-blank {
  width: calc(48px + 4px); }

button {
  width: 48px;
  height: 42px;
  font: 24px/1.5 "Source Code Pro", Monospace;
  color: #fff;
  background-color: #9c9ca4;
  border-radius: 3px;
  border-style: none;
  box-shadow: inset 0 1px 5px white, inset 0 -1px 5px #38383c, inset 1px 0 5px white, inset -1px 0 5px #38383c; }
  button.btn-ac {
    background-color: #b26a7f;
    box-shadow: inset 0 1px 5px #e6cfd6, inset 0 -1px 5px #562d39, inset 1px 0 5px #e6cfd6, inset -1px 0 5px #562d39; }
    button.btn-ac:active {
      box-shadow: inset 0 1px 5px #9a4f65, inset 0 -1px 5px #c38c9c, inset 1px 0 5px #9a4f65, inset -1px 0 5px #c38c9c; }
  button.btn-operator {
    background-color: #2d2d2d;
    box-shadow: inset 0 1px 5px #535353, inset 0 -1px 5px #070707, inset 1px 0 5px #535353, inset -1px 0 5px #070707; }
    button.btn-operator:active {
      box-shadow: inset 0 1px 5px #202020, inset 0 -1px 5px #3a3a3a, inset 1px 0 5px #202020, inset -1px 0 5px #3a3a3a; }
  button:active {
    box-shadow: inset 0 1px 5px #686872, inset 0 -1px 5px #d1d1d5, inset 1px 0 5px #686872, inset -1px 0 5px #d1d1d5; }

/*# sourceMappingURL=style.css.map */