@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";:root{--background: hsl(215, 100%, 30%);--text: white}*{box-sizing:border-box;padding:0;margin:0;font-family:Inter,sans-serif;font-size:1rem;color:var(--text);background:transparent}body{background:var(--background)}.container{width:100dvw;height:100dvh;display:flex;align-items:center;justify-content:center}main{display:flex;flex-direction:row;gap:1rem;width:max-content;height:max-content}canvas{image-rendering:pixelated;max-width:720px;max-height:720px;min-width:720px;min-height:720px}hgroup,h2{text-align:center;letter-spacing:-1px}hgroup>h1,h2{font-size:2.5rem;font-weight:600}hgroup>h2{font-size:1.75rem;font-weight:500}form{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem}input,button{border:1px solid var(--text);border-radius:.25rem;padding:0 .25rem}a,a:visited{font-size:inherit;color:var(--text)}a:hover{opacity:.9}a:active{opacity:.6}[disabled]{opacity:.5}.config-container{display:flex;justify-content:center;align-items:center;gap:2rem;flex-direction:column}.config-container>*{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;padding:1rem}#options{display:flex;gap:.75rem;flex-direction:column}#options>.group{display:grid;gap:.25rem;grid-template-columns:2fr 3fr;align-items:center;justify-items:center}#options label{font-weight:500;font-size:1.125rem;text-align:right;place-self:self-end}#options label:after{content:":";font-weight:300}#options input[type=number]{width:100%}#options input[type=checkbox]{width:12px;height:12px;accent-color:white;place-self:start;align-self:center}#options .input-group{display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem}#generate{padding:.25rem .5rem;transition:all .5s;font-weight:600}#generate:hover{background:white;transform:scale(1.1);color:#004d99}#generate:active{opacity:.25;transition-duration:.1s}
