:root {
	--color-background: #f9f9f9;
	--color-background-attention: #ffffff;
	--color-text: #000000;
	--color-text-inverted: #ffffff;
	--color-text-subdued: #4f4e4e;
	--color-text-attention: teal;
	--color-text-warning: rgb(218, 13, 13);
	--invert: 0;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-background: #222222;
		--color-background-attention: #000000;
		--color-text: #f9f9f9;
		--color-text-inverted: #ffffff;
		--color-text-subdued: #f1f1f1;
		--color-text-warning: rgb(218, 13, 13);
		--invert: 1;
	}
}

* {
	box-sizing: border-box;
}

html, body {
	color: var(--color-text);
	background: var(--color-background);
	font-family: sans-serif;
	min-height: 100%;
	margin: 0;
}

html {
	height: 100%;
}

body {
	height: 100%;
	display: grid;
	grid-template:
		"header" 6rem
		"content" 1fr;
}

header {
	grid-area: header;
	border-bottom: 2px solid var(--color-text-subdued);
}

header .logoContainer {
		display: inline-block;
		position: relative;
	}

header .logoContainer .logo {
			height: 5rem;
			filter: invert(var(--invert));
		}

header .logoContainer .siteTag {
			position: absolute;
			right: 0;
			bottom: 0;

			color: var(--color-text-attention);
			font-size: 1.3em;
		}

header .logoContainer .betaTag {
			width: 1px; /* Out-of-box alignment hack */
			position: absolute;
			right: -.3rem;
			bottom: 0;
			font-style: italic;

			color: var(--color-text-warning);
			font-size: 1.3rem;
		}

main {
	grid-area: content;
	margin: .5rem 0;
    padding: 0 0 2rem 0;
}

main div.search input { width: 100%; }

footer {
    position: fixed;
    bottom: 0;
	line-height: 2rem;
	border-top: 1px solid var(--color-text-subdued);
    background: var(--color-background);
}

main a, footer a {
		color: var(--color-text-attention);
	}

main a:hover, footer a:hover { text-decoration: none; }

article {
	line-height: 1.25rem;
}

.counter {
	margin-bottom: .5em;
	font-style: italic;
	font-size: .9em;
	text-align: right;
}

.linkSpacer {
	margin: 0 .5em;
}

@media only screen and (max-width: 1000px) {
    body {
        width: 100%;
    }

    footer {
        width: calc(100% - 1rem);
    }

	body {
        padding: 1rem .5rem 0 .5rem;
	}
}

@media only screen and (min-width: 1400px) {
    body {
        width: 60rem;
    }

    footer {
		width: calc(60rem - 4rem);
    }

	body {
        padding: 1rem 2rem 0 2rem;
	}
}