$pagePadding: 0.5em;
/*$background: #f9f9f9ff;*/
$background: #f9f9f9ff;

* {
    box-sizing: border-box;
}

html, body {
	/* background-color: rgb(248, 249, 236); */
	background-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" 50px;
}

header {
    grid-area: header;
	border-bottom: 2px solid black;
    align-self: center;

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

        .logo {
            height: 5rem;
        }

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

            color: teal;
            font-size: 1.3em;
        }

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

            color: rgb(218, 13, 13);
            font-size: 1.3em;
        }
    }
}

main {
    grid-area: content;
	margin-bottom: 2em;


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

footer {
    grid-area: footer;
	border-top: 1px solid black;
	height: 2em;
	background-color: $background;
}

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

.staticContent {
	margin: 0 2em;
	max-width: 900px;
}

.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;
    }
}