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}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}