* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 .container {
     background-color:#425062;
     height: 100vh;
     text-align: center;
 }
 .container h1{
    padding: 20px 0;
    color: white;
    letter-spacing: 2PX;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 }

 .calculator {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 500px;
     padding: 20px;
     border-radius: 10px;
     transform: translate(-50%, -50%);
     background: #fff;
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
     
 }

 .input {
     border: 1px solid #425062;
     border-radius: 5px;
     padding: 10px;
     margin-bottom: 20px;
     background: #425062;
 }

 .input input {
     border: none;
     width: 100%;
     font-size: x-large;
     margin-bottom: 10px;
     
 }
.input input:focus{
    outline: none
}
 .input p {
     color: white;
     text-align: left;
 }

 .keys {
     display: grid;
     grid-template-columns: auto auto auto auto;
     column-gap: 10px;
     row-gap: 10px;
 }

 .keys button {
     height: 40px;
     cursor: pointer;
     font-size: large;
     background-color: #425062;
    color: #fff;
    border: none;
    outline: none;
    border-radius: 5px;
   box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
 }

 .keys button:hover {
     
    background: #3e4b5c;
 }