html { height:100%; } body { font-family: var(--bs-font-sans-serif); background-color: var(--bg-color); color: var(--font-color); margin:0; padding:0; min-height: 100%; display: flex; flex-direction: column; align-items: center; } header { margin-top:15vh; text-align:center; padding-bottom: 4rem; max-width:600px; } h1, h2 { font-weight: bold; } h1 { padding-bottom: 2rem; } .content { text-align:center; flex-grow: 1;} p, a { font-size:12px; color: var(--font-color); text-decoration:none; margin:5px 0; padding:0; } a { color: var(--primary-color); text-decoration:none; } a:hover { color: var(--primary-color); text-decoration:underline; } div.logo { margin-bottom:3rem; } div.logo img { width:30vw; max-width:20rem; } footer { text-align: center; padding: 1rem 0; } :root { --primary-color: #36588A; --secondary-color: #3d4a50; --font-color: #111827; --bg-color: #f9fafb; --heading-color: #292922; --bs-font-sans-serif: "Inter", sans-serif; --bs-font-monospace: "Inter", sans-serif; } @media screen and (max-width:767px){ header { margin-top:10vh; } div.logo img { width:60vw; } } @media (prefers-color-scheme: dark) { :root { --primary-color: #36588A; --font-color: #fff; --bg-color: #161625; --heading-color: #818cab; } }