@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";*,*::backdrop,*:after{box-sizing:border-box;margin:0;font-family:Roboto}body{background-color:#121212;display:flex;justify-content:center;align-items:center;height:100vh}.calculator{justify-content:center;display:grid;margin-top:2rem;grid-template-columns:repeat(4,6rem);grid-template-rows:minmax(7rem,auto) repeat(5,6rem);background:linear-gradient(145deg,#1d1d1d,#171717);box-shadow:20px 20px 50px #0e0e0e,-20px -20px 50px #2e2e2e;border-radius:1rem;padding:1rem}.calculator>button{cursor:pointer;font-size:2rem;border:none;outline:none;background-color:#ffffff26;color:#fff;border-radius:.5rem;box-shadow:5px 5px 10px #0e0e0e,-5px -5px 10px #2e2e2e;transition:transform .05s,background-color .1s}.calculator>button:hover,.calculator>button:focus{background-color:#ffffff40;transform:translateY(-.2px)}.span-two{grid-column:span 2}.output{grid-column:1 / -1;background-color:#000000d9;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-around;padding:1rem;word-wrap:break-word;word-break:break-all;border-radius:.5rem;box-shadow:inset 5px 5px 10px #0e0e0e,inset -5px -5px 10px #2e2e2e}.output .previous-operand{color:#ffffffbf;font-size:1.5rem}.output .current-operand{color:#ffffffe6;font-size:2.5rem}