@import"https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap";*{margin:0;box-sizing:border-box}html{font-size:62.5%}#root{height:100vh;width:100vw;display:flex;align-items:center;justify-content:center;background-color:#ecfffc}.calc-container{width:min(400px,99vw);height:min(550px,95vh);display:flex;flex-direction:column;padding:2.5rem;gap:.5rem;background-color:#f2feff;border-radius:2rem;box-shadow:5px 5px 10px 4px #2e90996a,-5px -5px 17px 4px #ffffff86}.display-container{height:15%;border-radius:1rem;box-shadow:inset 5px 5px 6px 3px #95b5b1a2,inset -5px -5px 6px 3px #ffffff86;display:flex;flex-direction:column;align-items:flex-end}.display-container .input-query{height:40%;width:100%;box-shadow:inset 5px 5px 6px 3px #2e90996a,inset -5px 0 6px 3px #ffffff86;border:none;color:#544fec;text-align:right;font-family:Chakra Petch,sans-serif;font-weight:500;letter-spacing:.1rem;border-top-left-radius:1rem;border-top-right-radius:1rem;background-color:#f2feff}.display-container .input-solution{width:100%;border:none;box-shadow:inset -5px -5px 6px 3px #ffffff86,inset 5px 0 6px 3px #2e90996a,inset 0 5px 5px 3px #eaffff;background-color:#f2feff;border-bottom-left-radius:1rem;border-bottom-right-radius:1rem;flex:1;text-align:right;font-size:2.3rem;color:#544fec;letter-spacing:.2rem;font-family:Chakra Petch,sans-serif;font-weight:500}.operators-container{flex:1;display:flex;flex-direction:column;border-radius:1rem;padding:10px}.operators-container .upper-div{height:60%;display:flex;flex-wrap:wrap;justify-content:space-around;gap:5px}.operators-container .lower-div{flex:1;display:flex}.operators-container .lower-div .big-lower{width:75%;display:flex;flex-wrap:wrap;justify-content:space-around;gap:5px}.operators-container .lower-div .small-lower{flex:1;display:flex;align-items:center;justify-content:center}.upper-div button{width:20%;height:28%;border-radius:50%;border:none;background-color:#f2feff;box-shadow:3px 3px 10px 3px #2e90996a,-3px -3px 10px 3px #ffffff86}.big-lower button{width:27.5%;height:43%;border-radius:50%;border:none;background-color:#f2feff;box-shadow:3px 3px 10px 3px #2e90996a,-3px -3px 10px 3px #ffffff86}.small-lower button{height:90%;width:70%;border-radius:30px;border:none;background-color:#a1a7fa;box-shadow:inset 10px 10px 10px 5px #8287d3,3px 3px 10px 3px #70b3ffdb,-3px -3px 10px 3px #ffffff86,inset -5px -5px 10px 3px #d8c5ff86}button{outline:none;font-size:2.3rem;color:#371a1a;font-family:Chakra Petch,sans-serif;font-weight:500}button:hover{filter:brightness(105%)}input{outline:none}@media screen and (max-width: 400px){.calc-container{scale:.95}.upper-div button{margin-top:5px;width:19%;height:26%}.big-lower button{margin-top:5px;width:25.5%;height:40%}.small-lower button{height:88%;width:67%}button{font-size:2.1rem}}@media screen and (max-width: 380px){.upper-div button{margin-top:5px;width:19%;height:25%}.big-lower button{margin-top:5px;width:24.8%;height:37%}.small-lower button{height:88%;width:67%}.input-solution{font-size:2rem}}@media screen and (max-width: 364px){.upper-div button{margin-top:5px;width:18.7%;height:23%}.big-lower button{width:24.2%;height:35%}.small-lower button{height:85%;width:65%}button{font-size:2rem}}@media screen and (max-width: 353px){.upper-div button{margin-top:5px;width:18.7%;height:22%}.big-lower button{width:24.2%;height:34%}.small-lower button{height:84%;width:63%}button{font-size:1.9rem}}@media screen and (max-width: 341px){.upper-div button{margin-top:8px;width:18.6%;height:21%}.big-lower button{margin-top:7px;width:24%;height:32%}.small-lower button{height:82%;width:62%}button{font-size:1.8rem}}@media screen and (max-width: 330px){.upper-div button{margin-top:10px;width:18.5%;height:20%}.big-lower button{margin-top:7px;width:23.7%;height:30.4%}.small-lower button{height:80%;width:61%}button{font-size:1.7rem}}@media screen and (max-width: 311px){.upper-div button{margin-top:12px;width:18.4%;height:18.3%}.big-lower button{margin-top:9px;width:23.3%;height:28.1%}.small-lower button{height:77%;width:60%}button{font-size:1.6rem}}@media screen and (max-width: 300px){.upper-div button{margin-top:14px;width:18.3%;height:18.1%}.big-lower button{margin-top:11px;width:23.3%;height:27.5%}.small-lower button{height:75%;width:58%}button{font-size:1.55rem}}