canvas{position:fixed;top:0;left:0}body{overflow:hidden;font-size:1vw}.widget{z-index:100;position:absolute;right:0;top:0;display:flex;flex-direction:column;overflow:auto;border-radius:1em 0 0 1em;background-color:#fff;height:100%;box-sizing:border-box;line-height:1.5;text-align:left;width:30%}.widget input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #ececec;padding:.8em;border-radius:.8em;width:4em;text-align:center;font-size:inherit}.datainputs{padding:2em;font-size:1.5vw}#zoom{position:absolute;z-index:100;left:0;bottom:0;font-size:1.5vw;padding:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#zoom span{display:inline-block;background-color:#fff;border-radius:100%;padding:5px;margin:5px}#edit{display:none}.table-row>*{padding:.5em 0;margin:.2em 0}.table-row>label{padding-right:1em;width:30%;display:inline-block}.sheet{background-color:#00ff6d;padding:2em;flex:1}.sheet p{line-height:1.5}a{color:#000}#logo{position:absolute;width:50%;display:flex;padding:1em}#logo span:first-of-type{background-image:url(../img/sun.e0ce8deb.png);flex-basis:30%;background-size:contain;background-position:50%;background-repeat:no-repeat}#logo span:nth-of-type(2){border-left:1px solid #000;padding-left:5px;text-align:left;margin-left:5px;opacity:0;pointer-events:none}#logo:hover span:nth-of-type(2){opacity:0}@media (max-width:700px){body{overflow:hidden;font-size:2vw}#zoom,.datainputs{font-size:3vw}#logo{width:100%}#edit{display:block;position:absolute;background-color:#fff;right:0;bottom:0;margin:15px;padding:5px;font-size:3vw;border-radius:10px}.widget{width:70%;transform:translateX(100%);transition:transform .3s ease}.widget input{width:6em}.widget.show{transform:translateX(0)}}body{padding:0;margin:0}#app{font-family:Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;display:flex;height:100vh;width:100vw;margin:0}#app>div{flex:1}