body{padding:0;margin:0;font-family:Dosis,sans-serif;background-color:#444;font-size:16px}header{margin:0;padding:.5em 0;text-align:center;background-color:#202020}header h1{margin:0;padding:0;font-size:1em;color:#fff}h2{font-size:1em;margin-top:1.5em;color:#f0ffb4}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{position:relative;width:648px;margin:0 auto}.container{display:grid;grid-template-columns:50% 50%;color:#444}.box{background-color:#444;color:#fff;padding:20px}.box:nth-of-type(2){z-index:2;background:#0000004d}#canvas-holder{min-width:600px}#pattern-selector{background-color:#000;padding:.25em .5em;margin:.25em 0}#pattern-selector label{display:inline-block;width:7em}table tr td:nth-of-type(1){width:7em}button{background-color:#4caf50;border:none;border-radius:.5em;color:#fff;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;cursor:pointer}button.small{background-color:#4ca8af;padding:5px 10px;font-size:12px}.pattern-control{background-color:#202020;padding:.25em .5em;margin:.25em 0}.pattern-control label{display:inline-block;width:7em}.pattern-control input[type=range]{width:20em}.pattern-control input[type=text]{width:40em}