body{background-color:#444;margin:0;padding:0;font-family:Dosis,sans-serif;font-size:16px}header{text-align:center;background-color:#202020;margin:0;padding:.5em 0}header h1{color:#fff;margin:0;padding:0;font-size:1em}h2{color:#f0ffb4;margin-top:1.5em;font-size:1em}p.small{font-size:.75em}footer{color:gray;text-align:center;background-color:#202020;padding:.5em 0}footer p{margin:0;padding:0}footer a,footer a:link,footer a:visited,footer a:hover,footer a:active{color:#8c8c8c;text-decoration:underline}#sketch-holder{width:648px;margin:0 auto;position:relative}.container{color:#444;grid-template-columns:50% 50%;display:grid}.box{color:#fff;background-color:#444;padding:20px}.box:nth-of-type(2){z-index:2;background:#0000004d}#canvas-holder{min-width:600px}#pattern-selector{background-color:#000;margin:.25em 0;padding:.25em .5em}#pattern-selector label{width:7em;display:inline-block}table tr td:first-of-type{width:7em}table tr td{vertical-align:middle;height:2em}button{color:#fff;text-align:center;cursor:pointer;background-color:#4caf50;border:none;border-radius:.5em;padding:15px 32px;font-size:16px;text-decoration:none;display:inline-block}button.small{background-color:#4ca8af;padding:5px 10px;font-size:12px}.pattern-control{background-color:#202020;margin:.25em 0;padding:.25em .5em}.pattern-control label{width:7em;display:inline-block}.pattern-control input[type=range]{width:20em}.pattern-control input[type=text]{width:40em}.select-css{color:#444;box-sizing:border-box;appearance:none;background-color:#fff;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E),linear-gradient(#fff 0%,#e5e5e5 100%);background-position:right .7em top 50%,0 0;background-repeat:no-repeat,repeat;background-size:.65em,100%;border:1px solid #aaa;border-radius:.5em;width:auto;max-width:100%;margin:0;padding:.25em 1.4em .2em .5em;font-family:sans-serif;font-size:16px;font-weight:400;line-height:1.3;display:inline-block;box-shadow:0 1px 0 1px #0000000a}.select-css::-ms-expand{display:none}.select-css:hover{border-color:#888}.select-css:focus{box-shadow:0 0 1px 3px #3b99fcb3;box-shadow:0 0 0 3px -moz-mac-focusring;color:#222;border-color:#aaa;outline:none}.select-css option{font-weight:400}