body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.container{align-items:center;display:flex;flex-direction:column;height:100vh;justify-content:center;width:100vw}.header{height:10vh;width:100%}button{background-color:#000;color:#e8eaea;cursor:pointer;font-weight:700}button:focus{outline:none}.basic{align-items:center;background-image:radial-gradient(ellipse at 15% 10%,rgba(0,0,0,.03) 0,transparent 50%),radial-gradient(ellipse at 85% 95%,rgba(0,0,0,.04) 0,transparent 40%),radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.02) 0,transparent 70%);border-radius:22px;box-shadow:5px 5px 10px 0 rgba(0,0,0,.62);display:flex;flex-direction:column;height:600px;position:relative;width:414px}@media screen and (max-width:416px){.basic{height:100%;width:100%}}@media screen and (max-width:281px){.basic{height:100%;width:280px}}.calculator-container{width:100%}.calculator-container,.calculator-main{align-items:center;display:flex;flex:1 1;justify-content:center}.calculator-main{height:100%}.basic>.screen-container{background-color:#ffebcd;border-radius:22px 22px 0 0;display:flex;flex:.75 1;flex-direction:column;width:100%}.basic>.screen-container>.screen-top{align-items:center;display:flex;flex:1 1;flex-direction:row;padding:16px 16px 0}.basic>.screen-container>.screen-top>.logo{align-items:center;display:flex;flex:1 1;flex-direction:column;font-family:Brush Script MT,cursive;height:65%;justify-content:center;margin-right:12px}.basic>.screen-container>.screen-top>.logo h4,.basic>.screen-container>.screen-top>.logo p,.basic>.screen-container>.screen-top>.logo>h2{margin:0}.basic>.screen-container>.screen-top>.logo>p{font-size:32px;font-weight:700;text-shadow:0 1px 1px rgba(0,0,0,.15)}.basic>.screen-container>.screen-top>.logo>h4{color:#ff9901;font-size:11px;letter-spacing:2px;margin-top:-8px}.basic>.screen-container>.screen-top>.solar{background:linear-gradient(180deg,rgba(221,92,41,.77) 0,rgba(92,33,10,.77) 11%,rgba(90,32,9,.77) 21%,#4d1702 87%,#4b1601 98%,#81462f);border-radius:4px;box-shadow:inset 5px 5px 8px rgba(0,0,0,.5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#c4dd5c29",endColorstr="#81462f",GradientType=0);height:65%;width:150px}.basic>.screen-container>.screen{align-items:flex-end;background:linear-gradient(180deg,#a8b0a0,#b8c0b0 30%,#c0c8b8 70%,#a8b0a0);border:1px solid #000;border-radius:4px;box-shadow:inset 0 2px 6px rgba(0,0,0,.4),inset 0 -1px 2px rgba(0,0,0,.15),0 1px 0 hsla(0,0%,100%,.2);display:flex;flex:1 1;height:60px;justify-content:flex-end;margin:16px;overflow:auto;padding:8px;scroll-behavior:auto;white-space:nowrap}.basic>.middle-skinny{background-color:#ffebcd;flex:.2 1;width:100%}.basic>.crease{background:linear-gradient(180deg,#ffebcd 0,#ffdfae 30%,#ffdba4 50%,#ffdfae 70%,#ffebcd);box-shadow:inset 0 4px 6px rgba(0,0,0,.2),inset 0 -3px 5px hsla(0,0%,100%,.1);height:12px;width:100%}.basic>.basic-keys-container{background-color:#ffebcd;border-bottom-left-radius:8px;border-bottom-right-radius:8px;display:flex;flex:1 1;flex-direction:column;padding:24px 0;width:100%}.top>button{border-radius:4px;height:65%}.top>button:hover{filter:brightness(1.1)}.top>button:active{filter:brightness(.95)}.row{display:flex;flex:1 1;margin:0 24px}.row>button{box-shadow:0 3px 1px rgba(0,0,0,.4),0 4px 6px rgba(0,0,0,.2),inset 0 1px 0 hsla(0,0%,100%,.15);flex:1 1;margin:4px;transition:box-shadow .1s ease,transform .1s ease}.row>button:hover{box-shadow:0 3px 1px rgba(0,0,0,.45),0 5px 8px rgba(0,0,0,.25),inset 0 1px 0 hsla(0,0%,100%,.2)}.row>button:active{box-shadow:0 1px 1px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.2),inset 0 1px 3px rgba(0,0,0,.15);transform:translateY(2px)}.small{margin:0 0 0 24px}.basic-keys{grid-gap:8px;display:grid;flex-wrap:wrap;gap:8px;grid-template-columns:repeat(3,1fr);height:100%}.basic-keys>.basic-keyboard{grid-template-rows:repeat(4,1fr)}.basic-keys>.basic-arithmetic{grid-template-rows:repeat(2,1fr)}.right-side{display:flex;flex:1 1;flex-direction:column;margin-left:8px}.basic-arithmetic>.basic-key,.basic-keyboard>.basic-key{border:1px solid #000;border-radius:4px;box-shadow:0 3px 1px rgba(0,0,0,.4),0 4px 6px rgba(0,0,0,.2),inset 0 1px 0 hsla(0,0%,100%,.15);flex:1 1;font-size:42px;transform:skewX(-4deg);transition:box-shadow .1s ease,transform .1s ease}.basic-arithmetic>.basic-key:hover,.basic-keyboard>.basic-key:hover{brightness:1.05;box-shadow:0 3px 1px rgba(0,0,0,.45),0 5px 8px rgba(0,0,0,.25),inset 0 1px 0 hsla(0,0%,100%,.2)}.basic-arithmetic>.basic-key:active,.basic-keyboard>.basic-key:active{box-shadow:0 1px 1px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.2),inset 0 1px 3px rgba(0,0,0,.15);transform:skewX(-4deg) translateY(2px)}.basic-arithmetic{flex:.5 1}.basic-general{display:flex;flex:1 1;flex-direction:column}.bottom-container{display:grid;flex:2 1;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);margin:0 24px}.bottom-container .small.row:first-of-type{grid-row:1}.bottom-container .small:last-child{grid-row:2}.bottom-container .row{margin-left:0}.bottom-container>div{display:flex;flex:1 1;flex-direction:column;grid-column:1/4;grid-row:1/span 2}.bottom-container>button{box-shadow:0 3px 1px rgba(0,0,0,.4),0 4px 6px rgba(0,0,0,.2),inset 0 1px 0 hsla(0,0%,100%,.15);flex:.208 1;margin:4px;transition:box-shadow .1s ease,transform .1s ease}.bottom-container>button:hover{box-shadow:0 3px 1px rgba(0,0,0,.45),0 5px 8px rgba(0,0,0,.25),inset 0 1px 0 hsla(0,0%,100%,.2)}.bottom-container>button:active{box-shadow:0 1px 1px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.2),inset 0 1px 3px rgba(0,0,0,.15);transform:translateY(2px)}@media screen and (max-width:412px){.bottom-container>button{flex:.225 1}}@media screen and (max-width:376px){.bottom-container>button{flex:.215 1}}.bottom-container>div>.small>.basic-key>.three{grid-column:1;grid-row:1}.bottom-container>div>.small>.basic-key>.two{grid-column:2;grid-row:1}.one{grid-column:3/span 1;grid-row:1/span 1}.plus{grid-column:4;grid-row:1/span 2}.red{background-color:#ac0808}.basic-key.clear,.basic-key.zero{overflow:hidden;position:relative}.basic-key.clear:after,.basic-key.zero:after{background:radial-gradient(ellipse at center,#000 35%,transparent 70%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.basic-key.one,.operator-key.plus{overflow:hidden;position:relative}.basic-key.one:after,.operator-key.plus:after{background:radial-gradient(ellipse at center,#000 25%,transparent 70%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.basic-key.\35,.basic-key.two,.operator-key.divide{overflow:hidden;position:relative}.basic-key.\35 :after,.basic-key.two:after,.operator-key.divide:after{background:radial-gradient(ellipse at center,#000 15%,transparent 70%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.App{display:flex;justify-content:center;text-align:center}.App-logo{height:40vmin;pointer-events:none}@media(prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
/*# sourceMappingURL=main.be62ce5e.css.map*/