:where(html){--brand-lightness:77%;--brand-chroma:0.18;--brand-hue:218;--brand:oklch(var(--brand-lightness) var(--brand-chroma) var(--brand-hue));--brand-accent:oklch(from var(--brand) l c calc(h + 180));--brand-light:oklch(from var(--brand) calc(l*1.3) calc(c/5) h);--text-light:oklch(from var(--brand) calc(l/5) calc(c/5) h);--brand-dark:oklch(from(var(--brand)) calc(l/2) c h);--brand-darkest:oklch(from var(--brand) calc(l/5) calc(c/5) h);--text-dark:oklch(from var(--brand) calc(l*1.2) calc(c/3) h)}:root{--color-background:var(--brand-light);--color-text:var(--text-light);--font-base:system-ui, Tahoma, Geneva, Verdana, sans-serif;--font-mono:monospace;--size-base:1rem;--size-lg:calc(2 * var(--size-base));--size-xl:calc(3 * var(--size-base));--size-xxl:calc(5 * var(--size-base));--transition:background-color ease-out 250ms}@media (prefers-color-scheme: dark){:root{--color-background:var(--brand-darkest);--color-text:var(--text-dark)}}body{font-family:var(--font-base);background-color:var(--color-background);color:var(--color-text)}p{text-align:center}a,a:visited{color:var(--brand-accent);transition:all ease-out 200ms}a:focus,a:hover{color:var(--brand)}.d-flex{display:flex;flex-wrap:wrap}#title{text-align:center}#grid{box-shadow:0 2rem 2rem -2rem var(--color-text);display:grid;margin:0 auto}.button{background-color:var(--brand);border-radius:var(--size-xl);border:2px solid var(--brand-dark);color:var(--brand-darkest);cursor:pointer;display:block;font-weight:bold;letter-spacing:0.1em;margin:var(--size-base) auto;padding:var(--size-base) var(--size-lg);text-align:center;text-transform:uppercase;transition:var(--transition)}.button:hover{background-color:var(--brand-dark);color:var(--text-dark)}label{font-weight:bold;font-size:1.2rem;margin-top:var(--size-lg);display:block}#hue-picker{accent-color:var(--brand-dark);margin-top:var(--size-base);width:400px}#rangevalue{background-color:var(--brand);border-radius:var(--size-base);border:2px solid var(--brand-dark);color:var(--brand-darkest);font-weight:bold;width:4rem;display:inline-block;font-size:var(--size-base);padding:0.25rem 0.5rem}.pixel{background-color:white;cursor:crosshair;height:var(--size-base);transition:var(--transition);width:var(--size-base)}.pixel:hover{background-color:var(--brand-dark)}footer{display:flex;font-size:1.3rem;justify-content:center;margin-top:var(--size-xxl);width:100%}.fa-github{color:var(--brand-accent);transition:all 0.3s ease-in-out}.copyright:hover{color:var(--brand)}.copyright:hover .fa-github,.fa-github:hover{color:var(--brand);transform:rotate(-45deg) scale(1.2)}