:root{--green: #78e194;--green-light: #cbf4d6;--dark: #282d38;--dark-light: #3d4556}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}body{position:relative;background-color:var(--green);min-width:320px;font-family:sans-serif;font-size:20px;transition:background-color .5s}#gauge svg{position:absolute;top:50%;left:50%;width:80%;height:80%;transform:translate(-50%,-50%)}#gauge svg circle{transform:translate(50%,50%) rotate(135deg);transition:all 1s}#gauge svg text{text-anchor:middle;alignment-baseline:middle;dominant-baseline:central;font-family:sans-serif;fill:#fff}#mode{position:absolute;left:50%;bottom:5%;transform:translate(-50%);text-align:center}#mode h3{color:#fff;padding:0 0 10px;margin:0;font-size:16px}#mode .buttons{display:flex}#mode button{display:block;border:none;background-color:var(--green-light);color:#000;width:100px;padding:0;margin:0;height:40px;line-height:40px;font-family:inherit;font-size:16px;outline:none;cursor:pointer;transition:background-color .2s,color .2s}#mode button.active{background-color:var(--dark);color:#fff}body.dark{background-color:var(--dark)}body.dark #gauge svg circle.back{stroke:var(--green-light);stroke-width:8}body.dark #mode button{background-color:var(--dark-light);color:#fff}body.dark #mode button.active{background-color:var(--green-light);color:#000}
/*# sourceMappingURL=index.css.map */