* { --background-color: #222222; --foreground-color: #eaeaea; --header-background-color: #444455; --content-background-color: #554455; --link-color: #aaaaff; --blockquote-bar: #cccccc; } body { display: flex; flex-direction: column; align-items: center; background-color: var(--background-color); color: var(--foreground-color); } header { max-width: 30rem; padding: 2rem; margin-bottom: 2rem; text-align: center; border-radius: 5px; background-color: var(--header-background-color); } header h1 { font-weight: normal; text-decoration: solid underline; } header p.subtitle { text-align: center; margin-bottom: 0; } main { border-radius: 5px; max-width: 50rem; padding: 2rem; background-color: var(--content-background-color); } main > article > h1 { text-align: center; font-size: 24pt; margin-top: 0; } p { text-align: justify; } p.subtitle { margin-top: 0; margin-bottom: 32px; font-style: italic; } p.authors { text-align: right; } p.authors::before { content: "—"; } a { color: var(--link-color); } ul#menubar { width: 100%; margin: 0; padding: 0; margin-top: 1rem; display: flex; justify-content: space-evenly; flex-wrap: wrap; } ul#menubar li { list-style: none; } blockquote { border-left: 3px solid var(--blockquote-bar); padding-left: 1rem; margin-left: 1.5rem; } blockquote p::before { content: "\201C"; } blockquote p::after { content: "\201D"; } p.publication-time { text-align: right; }