html {
   font-size: 62.5%;
   box-sizing: border-box;
}

*, *::before, *::after {
   margin: 0;
   padding: 0;
   box-sizing: inherit;
}

.calculator {
   border: 2px solid #28597a;
   border-radius: 4px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 346px;
}

.calculator-screen {
   width: 100%;
   font-size: 5rem;
   height: 80px;
   background-color: #3c4b52;
   border: none;
   color: white;
   padding-right: 10px;
   text-align: right;
}

button {
   height: 60px;
   background-color: #65a9d7;
   font-size: 2rem;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
   color: white;
   font-family: Georgia, 'Times New Roman', Times, serif;
   text-decoration: none;
   outline: none;
}

button:hover {
   background: #28597a;
   color: #ccc;
}

button:active {
   border-top-color: #1b435e;
   background: #1b435e;
}

.operator {
   border-top: 1px solid #96d1f8;
   background: #d4422e;
   background: -webkit-gradient(linear, left top, left bottom, from(#f12400), to(#c45a4c));
   background: -webkit-linear-gradient(top, #f12400, #c45a4c);
   background: -moz-linear-gradient(top, #f12400, #c45a4c);
   background: -ms-linear-gradient(top, #f12400, #c45a4c);
   background: -o-linear-gradient(top, #f12400, #c45a4c);
}

.operator:hover {
   background: #ad0000;
   color: #ccc;
}

.operator:active {
   border-top-color: #a00000;
   background: #a00000;
}

.equal-sign {
   border-top: 1px solid #96d1f8;
   background: #d4422e;
   background: -webkit-gradient(linear, left top, left bottom, from(#f12400), to(#c45a4c));
   background: -webkit-linear-gradient(top, #f12400, #c45a4c);
   background: -moz-linear-gradient(top, #f12400, #c45a4c);
   background: -ms-linear-gradient(top, #f12400, #c45a4c);
   background: -o-linear-gradient(top, #f12400, #c45a4c);
}

.equal-sign:hover {
   background: #ad0000;
   color: #ccc;
}

.equal-sign:active {
   border-top-color: #a00000;
   background: #a00000;
}

.calculator-keys {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
}

.delete {
   grid-column-start: 1;
   grid-column-end: 3;
}