/* Just a website. */

:root {
    color-scheme: light dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 19px;
    line-height: 1.65;
    background: #ffffff;
    color: #1f1f1f;
}

@media (prefers-color-scheme: dark) {
    body { background: #141414; color: #e6e4e0; }
}

main {
    max-width: 40rem;
    margin-inline: auto;
    padding: 3rem 1.4rem 4rem;
}

.header {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 1.8rem;
}

/* Narrow screens: give the text more room. The image scales with the
   column. Font sizes stay put. */
@media (max-width: 600px) {
    main { padding: 2rem 1rem 3rem; }
    .header { border-radius: 10px; margin-bottom: 1.5rem; }
}

h1 {
    font-size: 1.7em;
    line-height: 1.25;
    margin-bottom: 0.15em;
}

.role {
    color: #767676;
    margin-bottom: 0.35em;
}

.links {
    font-size: 0.95em;
    margin-bottom: 1.6em;
}

p { margin-bottom: 1em; }

h2 {
    font-size: 1.3em;
    margin: 2em 0 0.7em;
}

ul { padding-left: 1.2em; }

li { margin-bottom: 0.7em; }

li b { font-weight: 600; }

a { color: #0b57d0; }

@media (prefers-color-scheme: dark) {
    a { color: #8ab4f8; }
}