:root { --background-color: #f3f4f6; --text-color: #1f2937; --button-color: #d1d5db; --button-text-color: #1f2937; } @media (prefers-color-scheme: dark) { :root { --background-color: #030712; --text-color: #f3f4f6; --button-color: #1f2937; --button-text-color: #f3f4f6; } } html, body { font-family: Geist, sans-serif; width: 100%; height: 100%; display: flex; justify-content: center; background-color: var(--background-color); color: var(--text-color); } body { margin: 0; } .container { display: flex; flex-direction: column; align-items: start; justify-content: center; padding-top: 8rem; padding-left: 1rem; padding-right: 1rem; } h1 { font-weight: bolder; font-size: 1em; margin: 0; padding-bottom: 0.5rem; } h2 { font-weight: 400; font-size: 1em; margin: 0; padding: 0; } ul { list-style: none; margin: 0; padding: 0; } ul > li:not(:last-child) { padding-bottom: 0.5rem; } a { text-decoration: underline; color: var(--text-color) } hr.divider { border-color: var(--text-color); margin: 1.5rem 0; width: 100%; } main { width: 100%; flex: 1; } button { background-color: var(--button-color); color: var(--button-text-color); border: 1px #9ca3af solid; padding: 0.5rem 2rem; border-radius: 4px; width: 100%; font-weight: 500; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; } @media (prefers-color-scheme: dark) { button { border: 0; } } footer { padding-top: 2rem; padding-bottom: 4rem; opacity: 80%; font-size: 0.8em; display: flex; flex-direction: column; justify-content: center; } footer > p { margin: 0; } .summary { max-width: 40ch; font-size: 1em; line-height: 1.5em; padding-top: 1rem; padding-bottom: 1rem; } .back-link { font-size: 0.8em; }