html,body{margin:0;padding:0;height:100%}canvas{z-index:1;display:block;position:absolute;top:60px;left:0;width:100vw;height:calc(100vh - 60px);border:1px solid black}.instructions{font-family:Arial,sans-serif;margin-top:10px}.navbar{position:fixed;z-index:100;top:0;left:0;width:100%;height:60px;background:#222;color:#fff;display:flex;align-items:center;padding-left:20px;font-size:1.2em}.hamburger{position:fixed;display:block;width:35px;cursor:pointer;z-index:100;top:60px;appearance:none;background:none;outline:none;border:none}.hamburger .bar,.hamburger:after,.hamburger:before{content:"";display:block;width:100%;height:5px;background-color:#313030;margin:6px 0;transition:.4s}.hamburger.is-active{transform:translate(280px);transition:.4s}.hamburger.is-active:before{transform:rotate(-45deg) translate(-7px,6px)}.hamburger.is-active .bar{opacity:0}.hamburger.is-active:after{transform:rotate(45deg) translate(-9px,-9px)}.mobile-nav{position:fixed;overflow-y:auto;top:50px;left:-100%;width:282px;height:100vh;display:block;z-index:98;background-color:#272a2e;transition:.4s}.mobile-nav.is-active{left:0;display:block}.mobile-nav a{display:block;width:100%;text-align:center;padding:12px 16px;background-color:#272a2e;color:#fff;text-decoration:none;box-sizing:border-box}.mobile-nav a:hover{background-color:#555}#shape-list{width:100%;box-sizing:border-box;padding:12px 0}#shape-list *{box-sizing:border-box}.vertical-toolbar{position:fixed;top:60px;right:0;width:56px;height:calc(100vh - 60px);background:#e5e5e5;display:flex;flex-direction:column;align-items:center;padding-top:8px;z-index:95;box-shadow:-2px 0 4px #0000000d;transition:.4s}.vertical-toolbar button{background:none;border:none;margin:8px 0;width:40px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center}.vertical-toolbar button:hover{background:#ddd;border-radius:8px}.vertical-toolbar.is-active{bottom:0;display:block}.vertical-toolbar button img{width:24px;height:24px}