*{margin:0;padding:0;box-sizing:border-box}:root{--bg:#beebf3;--calc-bg: #ffffff;--primary:#51c9dc;--btn-bg:#e2f2ff;--btm-border:rgba(0,0,0,.3);--btn-color:#252525}body.dark{--bg:#353345;--calc-bg: #1a1a28;--primary:#51c9dc;--btn-bg:#252c3d;--btm-border:rgba(255,255,255,.3);--btn-color:#f5f5f5}#root{position:relative;height:100dvh;width:100%;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden}.calc{height:80dvh;width:min(95%,320px);background:var(--calc-bg);box-shadow:0 0 25px 5px #0003;display:flex;flex-direction:column}.display,.result{color:var(--btn-color);padding:.5rem 1rem;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;display:flex;align-items:center;justify-content:flex-end}.display{height:15%;width:100%;font-size:2.2rem;font-weight:800}.result{height:7%;width:100%;font-size:1.5rem;border-bottom:1px solid var(--btm-border)}.btn-grid{height:78%;width:100%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,1fr);gap:.5rem;padding:.5rem}.btn-grid button{border-radius:8px;border:none;font-size:1.5rem;background:var(--btn-bg);color:var(--btn-color);cursor:pointer;transition:transform .3s ease-in}.btn-grid button:active{transform:scale(.8)}.btn-grid button.ope{background:var(--primary);color:#fff;text-shadow:1px 0px 2px #222}.theme{position:absolute;right:1rem;top:1rem;height:40px;width:100px;z-index:4;background:none;border:none;font-size:35px;cursor:pointer;color:#000;transition:all .5s}.theme.dark{color:#fff;font-size:40px;transition:all .5s}.theme:active,.theme.dark:active{transform:rotate(360deg)}@media screen and (min-width:480px){.btn-grid button:hover{filter:contrast(90%)}}@media screen and (max-width:480px){#root{align-items:flex-end;padding-bottom:2rem}}