*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{--big-border-radius: 10px;--c1: #9236ed;--c2: #00acc1}body{height:100vh;overflow-y:hidden;background:linear-gradient(to bottom right,var(--c1),var(--c2));color:#2a2a2a;font-size:16px;font-family:Inter,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center}.calculator-grid{display:grid;margin-top:2rem;grid-template-columns:repeat(4,clamp(3.5rem,22.5vw,6rem));grid-template-rows:minmax(7rem,auto) repeat(5,clamp(3.5rem,22.5vw,6rem));box-shadow:5px 6px 8px #00000037;border-radius:var(--big-border-radius)}.calculator-grid button{font-size:2rem;cursor:pointer;border:2px solid white;outline:none;background-color:#ffffffa6}.calculator-grid button:hover,.calculator-grid button:focus{background-color:#ffffffcd}.calculator-grid button:focus{border:2px solid var(--c1)}.calculator-grid button:active{background-color:#fff}.span-two{grid-column:span 2}.output{grid-column:1 / -1;background-color:#000000bf;display:flex;flex-direction:column;align-items:flex-end;padding:20px;justify-content:space-around;word-wrap:break-word;word-break:break-all;font-weight:500;border-top-left-radius:var(--big-border-radius);border-top-right-radius:var(--big-border-radius)}.output .previous-operand{color:#ffffffbf}.output .current-operand{color:#fff;font-size:2.5rem}.footer{grid-column:1 / -1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background-color:#ffffffbf;color:#3d3d3d;padding:10px;font-size:.8rem;font-weight:300;border-bottom-left-radius:var(--big-border-radius);border-bottom-right-radius:var(--big-border-radius)}.footer a{text-decoration:none;color:var(--c1)}.footer a:hover,.footer a:focus,.footer a:visited{text-decoration:dotted underline;color:#230e37}