*{box-sizing:border-box}html,body{font:400 16px/1.21 Helvetica Neue,arial,sans-serif}body{background:linear-gradient(#fff 0%,#d8d8ed 81%) 50%/cover no-repeat fixed}h1,.instructions{text-align:center}.example{grid-area:1/1/1/3}.result{grid-area:3/1/4/5}.result input{color:#666;font-size:14px}details{grid-area:4/1/4/4}.tools{grid-column-gap:10px;grid-row-gap:15px;background-color:#fff;border-radius:10px;grid-template-columns:repeat(4,1fr);max-width:800px;margin:2em auto;padding:1.5em;display:grid;box-shadow:0 0 5px #0003}.tools>div,details{justify-content:stretch;display:grid}label{display:block}label,summary{text-transform:uppercase;margin-bottom:5px;font-size:12px;font-weight:700}.url{grid-area:1/3/2/5}.imagePanel{place-items:center;display:grid}.imagePanel img{object-fit:cover}.code{overflow:auto}input,select{border:2px solid #898;border-radius:2px;justify-self:stretch;padding:5px 10px;font-size:18px}summary{cursor:pointer}details{font-size:14px}@media (width<=850px){.tools{box-shadow:none;grid-template-columns:2fr;margin:0;padding:5px}.tools>*{grid-area:auto}.tools>div,details{padding:0}details{grid-area:auto;font-size:12px;overflow:auto}}img{border:1px solid #ccc}
/*# sourceMappingURL=index.b5bbd90b.css.map */