:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility}body{margin:auto;display:flex;flex-wrap:wrap;flex-direction:column;place-items:center;min-width:320px;max-width:480px;width:98vw;min-height:100vh}body #header{color:#f0e4e4;display:flex;justify-content:space-between;padding:0;margin:0;width:98%;min-height:20px;font-size:.75em}#header .menu-button{background-color:#57739900;height:40px;padding:0}#header #page-title{align-self:flex-end;font-size:1.5em;padding:2px}#calculator{width:98%;margin:auto;min-width:390px;display:flex;flex-direction:column;flex-wrap:wrap;padding:0}body #footer{color:#000;display:inline;width:98%;min-height:40px}div#calculator{margin-top:0}#display-container{margin:auto;width:98%;display:grid;column-gap:3px;grid-template-columns:70px 1fr;grid-template-rows:1fr 1fr 1fr;margin-block:20px}#display-container #buffer-display{grid-column:2 / span 1;grid-row:1 / span 1;background-color:#b7c2cc;color:#242424;text-align:right;border-top-left-radius:10px;border-top-right-radius:10px;padding:0 10px;font-size:1.5em}#display-container #convert{grid-column:1 / span 1;grid-row:1 / span 1;flex:1 0 1;background-color:#577399;margin-bottom:2px}#display-container #round-up{grid-column:1 / span 1;grid-row:2 / span 1;flex:1 0 1;margin-bottom:2px;background-color:#577399}#display-container #round-dn{grid-column:1 / span 1;grid-row:3 / span 1;flex:1 0 1;background-color:#577399}#display-container #display{min-width:0;min-height:80px;grid-column:2 / span 1;grid-row:2 / span 2;background-color:#b7c2cc;color:#242424;text-align:right;padding:0 10px;border-radius:0 0 10px 10px;font-size:48px}#display #fraction{font-size:.5em;vertical-align:25%;padding:0;margin:0;color:#222930}#fraction .numerator{vertical-align:40%}#fraction .denominator{vertical-align:-40%}#menu{position:fixed;top:0;width:98%;max-width:98%;margin:0;padding:0;background:#29313ae6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1;transition:transform .22s;transform:translate(-101%);font-size:18px}#menu #menu-header{min-height:20px;font-size:.75em}#menu.show{transform:translate(0)}#menu #close-menu-button{color:#fff;height:40px;padding:0}#menu ul{margin:0;padding:0}#menu li.menu-heading{list-style-type:none;margin:0,10px,0,10px;padding:10px;background:#191e24}#menu .menu-content{padding:10px}#menu #instructions{padding:20px}#menu-footer{text-align:center}#dismiss-menu-button{background-color:#57739980;height:auto;width:auto;padding:10px;margin:20px}#button-container{display:flex}#number-buttons{display:flex;flex-wrap:wrap;gap:5px}#number-buttons button{flex:1 0 21%}button{width:70px;height:70px;border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1.5em;font-weight:500;font-family:inherit;color:#f7f7ff;cursor:pointer;transition:border-color .25s}.button-operator{background-color:#bdd5ea;color:#495867;font-size:2em}#spare5,#spare0{background-color:#29313a00}.button-number{background-color:#577399}.button-modifier{background-color:#495867}.button-unit{background-color:#495867;min-width:36.5%;flex:1 1 1}.button-display{height:40px;padding:0;margin:0;font-size:1em}button#backspace,button#equals{background-color:#f9dc5c;color:#242424}button#clear{background-color:#fe5f55}button#convert{font-size:1em}