*{box-sizing:border-box}html{font-size:16px}.text-title{font-family:"Poppins",Arial,Helvetica,sans-serif;font-size:1.8rem;font-weight:600;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.text-screen{font-family:"Source Sans Pro",Arial,Helvetica,sans-serif}.text-operation{font-size:1.4rem;font-weight:400}.text-result{font-size:1.6rem;font-weight:700}.screen__equals{-webkit-user-select:none;-moz-user-select:none;user-select:none;font-weight:800}.key{font-size:1.5rem}.i-circle{font-size:.25em}.footer{font-family:"Parisienne",Arial,Helvetica,sans-serif;font-size:1.5rem;font-weight:600}#body{display:flex;justify-content:center;align-items:center;flex-direction:column;height:100vh;width:100%}.screen{display:flex;flex-direction:column;align-items:end}.screen__result,.screen__operation{display:flex;align-items:center}.keyboard{display:grid;gap:6px;grid-template-columns:repeat(4, 1fr)}.key__minus{grid-column-start:4;grid-row-start:2}.key__plus{grid-column-start:4;grid-row-start:3}.key__equals{grid-column-start:4;grid-row:4/6}.key__zero{grid-column:span 2}.background{border-radius:24px;padding:0 28px;padding-bottom:28px}.screen{border-radius:6px;margin-bottom:16px;padding:0 12px}.screen__result,.screen__operation{height:2.4rem}.text-title{margin:12px 0}.key{border-radius:6px;border:none;padding:4px 14px}.footer{padding:10px}#body{background-color:#e2e8f0}.background{box-shadow:2px 2px 4px rgba(0,0,0,.6);background:linear-gradient(45deg, rgb(2, 0, 36) 0%, rgb(9, 9, 121) 35%, rgb(0, 212, 255) 100%)}.screen{box-shadow:inset 2px 2px 4px rgba(0,0,0,.6);background-color:#fff}.text-title{color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.6)}.text-screen{color:#71717a}.text-result{color:#000}.key{box-shadow:2px 2px 4px rgba(0,0,0,.6),inset 2px 2px 2px rgba(255,255,255,.4);color:#fff}.key__number{background-color:#71717a}.key__operator{background-color:#2563eb}.key__equals{background-color:#2dd4bf}.key__number:hover{background-color:#5a5a62}.key__operator:hover{background-color:#1e4fbc}.key__equals:hover{background-color:#24aa99}.key__number:active{box-shadow:inset 2px 2px 4px rgba(0,0,0,.6)}.key__operator:active{box-shadow:inset 2px 2px 4px rgba(0,0,0,.6)}.key__equals:active{box-shadow:inset 2px 2px 4px rgba(0,0,0,.6)}