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: #1a78ff;
    --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: #1a78ff;
        --font-color: #fff;
        --bg-color: #161625;
        --heading-color: #818cab;
    }
}