:root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; color-scheme: light dark; color: rgba(255, 255, 255, 0.87); background-color: var(--background); width: 100vw; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; --background: #242424; } @media (min-width: 916px) { :root { width: unset; } #content div.column:first-child { flex-direction: row; height: 300px; } } body { margin: 0; padding: 0 2em 2em; } button { border-radius: 8px; border: 1px solid transparent; padding: 0.6em 1.2em; font-size: 1em; font-weight: 500; font-family: inherit; background-color: #1a1a1a; color: inherit; cursor: pointer; transition: border-color 0.25s; } button:hover { border-color: #646cff; } @media (prefers-color-scheme: light) { :root { color: #213547; background-color: #ffffff; } a:hover { color: #747bff; } button { background-color: #f9f9f9; } } .form { display: flex; flex-direction: column; } .form.input.group { display: flex; flex-direction: column; margin-bottom: 1em; } .form.input.group label { margin-bottom: .5em; } .form.input.group input { padding: 1em; } .form.input.group input[type=color] { padding: 0; } .form button[type=submit] { align-self: flex-end; background: var(--submit); color: #fff; } dialog { top: 8em; }