@import"https://fonts.googleapis.com/css?family=Play:400,700";.image-drop{padding:1em;margin:0 0 .5em;border:5px outset grey;background-color:#565172;color:#c8c8f1;text-align:center;cursor:pointer}.image-drop:hover{border-style:inset}.controls{padding:.5em;margin:0 0 1em}section{margin:0 0 1em}section>div{display:flex}label{display:block;flex-grow:1;margin-bottom:.2em}label span{display:inline-block;min-width:1.5em;text-align:center;opacity:.7}output{opacity:.5}input{font-size:inherit;width:100%}.example-images{color:#fff;text-align:center}.example-images fieldset{justify-content:center}.input-rgb label{border-color:red yellow green blue!important}.input-greyscale{filter:grayscale(100%)}.input-monochromish{filter:grayscale(100%) contrast(200%)}.input-monochromish input{background:black}.input-inverted{filter:invert(100%)}.input-sepia{filter:sepia(100%)}fieldset{display:flex;flex-wrap:wrap;border:0;padding:0;margin:0}fieldset div{position:relative}fieldset input{display:none}fieldset input:checked+label{background-color:#daa520;color:#fff;border-style:inset}fieldset label{display:block;position:relative;min-width:1em;text-align:center;line-height:1em;flex-grow:1;padding:.3em;margin:.1em;background-color:#b8860b;border:5px outset burlywood;-webkit-user-select:none;user-select:none;cursor:pointer}[for=example-0]{background-image:url(/example1.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;padding:1em;color:transparent!important;border-color:#555}[for=example-1]{background-image:url(/example2.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;padding:1em;color:transparent!important;border-color:#555}[for=example-2]{background-image:url(/example3.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;padding:1em;color:transparent!important;border-color:#555}[for=example-3]{background-image:url(/example4.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;padding:1em;color:transparent!important;border-color:#555}[for=example-4]{background-image:url(/example5.jpg);background-image:url(/example5.png);background-repeat:no-repeat;background-size:cover;background-position:center;padding:1em;color:transparent!important;border-color:#555}[for=example-5]{background-image:url(/example6.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;padding:1em;color:transparent!important;border-color:#555}.canvas-wrapper{border:1px solid #444}canvas{max-height:100vh;max-width:100%}[data-colorMode=Monochromish] canvas{image-rendering:pixelated}.output{background:white}.output img{display:none;max-width:7vw}@media (min-width: 768px){.output img{display:block}}.output.-ascii{line-height:1;background:rgb(196,215,220);color:#000}.output:hover{transition:all .3s ease;background:rgb(198,169,135)}.output:hover canvas{mix-blend-mode:multiply}body{margin:0;padding:0;background:black;color:#ddd;font-family:Play,sans-serif;font-size:clamp(.75rem,2vw,1rem)}.App{display:flex}.output-wrapper{display:flex;align-items:center;flex-flow:wrap}@media (min-width: 768px){.output-wrapper{flex-flow:row}}pre{font-size:.5em}aside{padding:0 .5em;margin:0 0 auto;order:1;width:100%}@media (min-width: 768px){aside{width:20%;max-width:20em;order:unset}}h1{position:relative;text-transform:uppercase;letter-spacing:.5em;text-align:center;margin:1em 0;padding:0;line-height:1;color:#fff}h1:after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:100%;background:radial-gradient(rgba(0,0,0,.75) .04em,transparent .01em);background-repeat:repeat;background-size:.1em .1em;mix-blend-mode:multiply}a{text-decoration:none;color:inherit}.canvas-wrapper{max-width:49%;line-height:0}@media (min-width: 768px){.canvas-wrapper{max-width:40%}}.alert{margin:1em 0;padding:1em;background:#330000;color:#fff}footer{margin:1em}button{border:0;background:#333;color:#fff;padding:0 .5em;text-transform:uppercase;font-size:.8em;cursor:pointer;border:5px outset #444}button:hover{border-style:inset;color:#ddd}button span{font-size:1.5em;margin-right:.25em}.loading{position:fixed;pointer-events:none;top:0;bottom:0;width:100vw;display:flex;justify-content:center;align-items:center;z-index:1000;font-size:5em;animation:fadeInAndOut .5s infinite alternate}@keyframes fadeInAndOut{0%{color:#000;text-shadow:0 0 2px white,0 0 2px white,0 0 2px white}to{color:#fff;text-shadow:0 0 2px black,0 0 2px black,0 0 2px black}}[hidden]{display:none!important}