:root {
    --color-background: #f9f9f9;
    --color-text: #000000;
    --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: #111111;
        --color-text: #f9f9f9;
        --color-text-subdued: #cccccc;
        --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;
	padding: 0;
    min-height: 100%;
}

html {
    margin: 0;
    height: 100%;
}

body {
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template:
        "header" 7rem 
        "content" 1fr
        "footer" 2rem;
}

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

    .logoContainer {
        display: inline-block;
        position: relative;
        margin: 1rem 0;

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

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

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

        .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-bottom: 2em;

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

footer {
    grid-area: footer;
    line-height: 2rem;
	border-top: 1px solid var(--color-text-subdued);
}

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

        &: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%;
        padding: 0 1rem;
    }
}

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

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