body { height: 100vh; padding: 0; margin: 0; font-family: sans-serif; display: flex; flex-direction: column; justify-content: space-between; align-items: center; --bg: #fff; --fg: #000; background: var(--bg); color: var(--fg); } @media (prefers-color-scheme: dark) { body { --bg: #202023; --fg: #eee; } } header { margin-top: 5px; } footer { margin-bottom: 5px; } a { color: #5b8a55; } a:hover { filter: brightness(120%); } form { display: flex; flex-direction: column; } form > div { margin-top: 5px; display: flex; flex-direction: row; justify-content: end; } form > div > label { width: 50%; margin-right: 10px; } form > div > input { width: 50%; border: 1px solid var(--fg); outline: none; background: var(--bg); color: var(--fg); } form > div > input:hover, form > div > input:focus { filter: brightness(130%); }