*,:after,:before{box-sizing:border-box}body{background:linear-gradient(#e66465,#9198e5);place-content:center;align-items:center;height:100vh;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;display:grid}.calculator{color:#fff;filter:drop-shadow(2px 4px 6px #000);background-color:#000;border-radius:10px;width:400px;padding:20px}.display{text-align:right;background-color:#202020;border-radius:5px;margin-bottom:15px;padding:10px}.previous,.current-container{flex-direction:row;justify-content:flex-end;padding:.1em;display:flex}.register-container{display:contents}.current-container{height:1.2em;font-size:3rem;overflow:hidden}.previous{height:1.7em;font-size:1.7rem}.register{color:#ddd;height:1em;font-size:1.5em;overflow:hidden}span.operation{color:gray;margin-left:4px}.keypad{grid-gap:5px;grid-template-columns:3fr 1fr;display:grid}.numbers{grid-gap:5px;grid-template-columns:1fr 1fr 1fr;font-size:2em;display:grid}.number[data-value="0"]{grid-column:span 2}.operators{grid-gap:5px;grid-template-columns:1fr;font-size:2em;display:grid}.button{color:#ddd;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:gray;border-radius:5px;place-content:center;align-items:center;height:65px;display:grid}.button:hover{color:#fff;background-color:#666}.operator{color:#333;background-color:orange}.operator:hover{color:#000;background-color:#ffa600a9}