body{width:100%;font-family:Share Tech Mono,monospace}h1{text-align:center;margin:0 auto;font-size:10rem}.pink{background-color:pink}.red{background-color:red}.blue{color:#fff;background-color:#00f}.black{color:#fff;background-color:#000}.green{background-color:green}.yellow{background-color:#ff0}.container{flex-wrap:wrap;justify-content:center;width:100%;padding:10px;display:flex}.container .matrix{flex:none;margin-right:30px;font-family:sans-serif;box-shadow:1px 1px #ccc}.container .matrix .row{display:flex}.container .matrix .row .cell{cursor:pointer;width:30px;height:30px;display:flex;box-shadow:inset 1px 1px #ccc}.container .matrix .row .cell:after{content:"";opacity:.2;background:radial-gradient(circle,#00000080,#00000080 40%,#fafafa4d 0%,#00000080 200%);width:30px;height:30px;display:block}.container .matrix .row .cell:hover:after{opacity:.7}.controls{flex-direction:column;justify-content:space-between;max-width:250px;display:flex}.controls .selected-color{text-align:center;margin:2px;padding:15px 10px;font-size:1em}.controls .options{justify-content:space-between;gap:5px;display:flex}.controls .options>button{text-align:center;cursor:pointer;background-color:#ff0;border:2px solid #000;width:100%;margin-top:2px;padding:5px 10px}.controls .options>button:hover{background-color:#faebd7}.controls .colors{flex-wrap:wrap;flex:0 0 200px;place-content:center space-between;display:flex}.controls .colors .color{cursor:pointer;border:2px groove #00008b;flex:1 0 auto;justify-content:center;margin:2px;padding:10px;display:flex}.controls .colors .color:hover{color:#000;background-color:#faebd7}@media (width<=540px){h1{font-size:5rem}.container{text-align:center}.container .matrix{margin-right:0}.container .matrix .row .cell,.container .matrix .row .cell:after{width:18px;height:18px}.controls{margin-top:20px}.controls .selected-color{padding:10px}.controls .colors{flex:auto}}
/*# sourceMappingURL=index.106ab0ed.css.map */