*{box-sizing:border-box}.app{align-items:center;display:flex;justify-content:center}*{font-family:monospace}.calculator{background-color:#000;border-radius:20px;display:flex;flex-direction:column;font-size:50px;height:750px;-webkit-user-select:none;user-select:none;width:400px}.calculator .display{flex-basis:33.33333%;flex-grow:1;flex-shrink:1;position:relative}.calculator .display .display-value{align-items:center;bottom:5%;color:#fff;display:flex;height:33.33333%;justify-content:right;position:absolute;right:5%;width:90%}.bigger-font{font-size:1.8em}.smaller-font{font-size:1.2em}.calculator .keypad{display:grid;flex-basis:66.66667%;flex-grow:2;flex-shrink:2;grid-template:repeat(5,1fr) /repeat(4,1fr)}.calculator .keypad .function-area{display:flex;flex-direction:row;grid-area:1/1/2/4}.calculator .keypad .operator-area{display:flex;flex-direction:column;grid-area:1/4/6/5}.calculator .keypad .number-area{display:flex;flex-direction:row;flex-wrap:wrap-reverse;grid-area:2/1/6/4}.button{align-items:center;border:.15em solid #010101;border-radius:50%;display:flex;font-size:1em;justify-content:center}.calculator .keypad .function-area .button{background-color:#a5a5a5;color:#000;height:100%;width:33.33333%}.calculator .keypad .operator-area .button{background-color:#ff9f0a;color:#fff;height:25%;width:100%}.calculator .keypad .number-area .button{background-color:#333;color:#fff;height:25%;width:33.33333%}.calculator .keypad .number-area .zero{background-color:#333;border-radius:1em;color:#fff;height:25%;justify-content:left;padding-left:.55em;width:66.66667%}.calculator .keypad .operator-area .opclicked{background-color:#fff;color:#ff9f0a}.number-area .button[data-clicked="1"]{-webkit-animation:number-clicked .15s 1;animation:number-clicked .15s 1}.function-area .button[data-clicked="1"]{-webkit-animation:function-clicked .15s 1;animation:function-clicked .15s 1}.equal[data-clicked="1"]{-webkit-animation:equal-clicked .15s 1;animation:equal-clicked .15s 1}@-webkit-keyframes number-clicked{0%{background-color:#333}50%{background-color:#737373}to{background-color:#333}}@keyframes number-clicked{0%{background-color:#333}50%{background-color:#737373}to{background-color:#333}}@-webkit-keyframes function-clicked{0%{background-color:#a5a5a5}50%{background-color:#d9d9d9}to{background-color:#a5a5a5}}@keyframes function-clicked{0%{background-color:#a5a5a5}50%{background-color:#d9d9d9}to{background-color:#a5a5a5}}@-webkit-keyframes equal-clicked{0%{background-color:#ff9f0a;color:#fff}50%{background-color:#fbc78d;color:#fff}to{background-color:#ff9f0a;color:#fff}}@keyframes equal-clicked{0%{background-color:#ff9f0a;color:#fff}50%{background-color:#fbc78d;color:#fff}to{background-color:#ff9f0a;color:#fff}}
/*# sourceMappingURL=main.3f578c41.css.map*/