@import url(/fonts/muller/muller.css); @property --transition { syntax: "*"; inherits: true; initial-value: none; } * { box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { * { transition: none; } } @keyframes swap1 { 0% { transform: none; } 49% { transform: translateX(-150vw); } 50% { content-visibility: hidden; } 100% { content-visibility: hidden; transform: none; } } @keyframes swap2 { 0% { content-visibility: hidden; transform: translateX(150vw); } 49% { content-visibility: visible; opacity: 1; } 100% { transform: none; opacity: 1; } } @keyframes fade-in { from { opacity: 0 } to { opacity: 1 } } :root { --hue: 300; --c-hue: calc(180 + var(--hue)); min-height: 100vh; align-items: center; justify-content: center; --font: Muller, sans-serif; font-family: var(--font); color-scheme: light dark; background: oklch(0.9 0.08 var(--hue)); transition: background 0.4s ease; width: 100vw; overflow-x: hidden; } @media (prefers-color-scheme: dark) { :root { background: oklch(0.3 0.12 var(--hue)); } } body { display: flex; flex-flow: column; } #pic-holder, #pic, #pic2 { width: min(1000px, 75vw); margin: auto; aspect-ratio: 2000/1346; flex: 1; } #pic-holder { position: relative; } #pic, #pic2 { position: absolute; inset: 0; } #pic2 { opacity: 0; pointer-events: none; } #buttons { flex: none; display: flex; gap: 20px; max-width: 40em; margin: 1.5rem auto 2.5rem; } button { --fg: var(--c-hue); --bg: var(--hue); font: 700 20pt var(--font); background: oklch(0.5 0.2 var(--bg)); color: oklch(0.95 0.075 var(--fg)); border: 3px solid oklch(0.2 0.05 var(--bg)); padding: 0.2em 0.5em; box-shadow: 6px 6px 2px oklch(0.4 0.2 var(--bg) / 0.45); transition: color 0.4s ease, background 0.4s ease, border 0.4s ease, translate 0.015s linear, box-shadow 0.015s linear; :root:not([data-running]) &:active, [data-running=swap] &#swap, [data-running=reroll] &#reroll { translate: 6px 6px; box-shadow: none; } } #back { position: absolute; bottom: 15px; left: 22px; a { color: oklch(0.4 0.15 var(--c-hue)); text-decoration: 3px solid underline; text-decoration-color: oklch(0.6 0.1 var(--c-hue)); } @media (prefers-color-scheme: dark) { color: oklch(0.9 0.19 var(--c-hue)); } } /* #palette-holder { */ /* overflow: auto; */ /* } */ #palette-holder { width: min(90vw, 1126px); margin: 2.5rem auto 0; } #palette { width: 100%; }