*,*:before,*:after{box-sizing:border-box}body{margin:0;padding:0;background:linear-gradient(to right,#7017ca,#69b5a6)}.center{display:flex;justify-content:center;align-items:center;height:100vh}.calcuator-grid{display:grid;grid-template-columns:repeat(4,6rem);grid-template-rows:minmax(7rem,auto) repeat(5,5rem);padding:20px;justify-content:center;border:1px solid black;border-radius:10px;box-shadow:0 0 20px #00000080;background-color:#000000a6;width:400px}.calcuator-grid>button{cursor:pointer;font-size:2rem;border:1px solid white;outline:none;background-color:#ffffffa6;transition:all .5s ease}.calcuator-grid>button:hover,.calcuator-grid>button:focus{background-color:#ffffffe6}.span-two{grid-column:span 2}.output{grid-column:1 / -1;background-color:#000000a6;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;padding:1rem;word-wrap:break-word;word-break:break-all}.output .previous-operand{color:#ffffff80;font-size:1.5rem;margin:auto 0;padding:0 1rem}.output .current-operand{color:#fff;font-size:2.5rem;margin:auto 0;padding:0 1rem}