@media screen and (max-width: 900px) {
	/* For smaller screen, make code font tinny, still better than
	   scrolling it */
	pre * {
		font-size: 80%;
	}
}
@media screen and (min-width: 2002px) {
    header {
        background-size: contain!important;
    }
}
@font-face {
	font-family: "Alice-Regular";
	src: url("/AliceRegular.woff2");
}
@font-face {
	font-family: "WildHaggis";
	src: url("/WildHaggis.woff2");
}
body {
  overflow-wrap: break-word;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100vh;
	background: #776e71;
	background-size: 750px;
	color: white;
	line-height: 1.55;
	font-size: 100%;
	margin: 0;
	font-family: "Alice-Regular", Georgia, serif;
}
header {
	text-transform: uppercase;
	font-family: "WildHaggis", serif;
	letter-spacing: .15rem;
	background-image: url("/header-bar.svg");
	background-size: cover;
	background-repeat: repeat-x;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap-reverse;
	justify-content: space-between;
	min-height: 50px;
	padding: 15px 15px 30px 15px;
}
footer {
	margin-top: 15px;
	display: flex;
	flex-direction: column;
	line-height: 1.0;
	font-size: 60%;
	background: #262425;
}
footer p {
	margin: auto;
	padding: 2px 0;
}
footer a { color: #9a9a9a }
footer a:hover { color: white }
#logo { margin: auto }
#header-right {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap-reverse;
}
#header-right a, #header-right #icons {
	color: white;
	text-decoration: none;
	font-size: 120%;
	margin: 10px;
}
#header-right a:hover {
	color: #9a9a9a;
}
strong { font-weight: 900; color: black }
main {
	display: flex;
	flex-direction: column;
}
main > ul, main > ol {
	width: calc(min(95% - 30px, 460px - 40px));
	margin: 0 auto 15px auto;
	padding-left: 30px;
}
li {
	margin-bottom: 5px;
}
main > p {
	width: calc(min(95%, 460px));
	margin: 0 auto 15px auto;
}
h1, h2, h3 {
	margin: 0 auto 25px auto;
	line-height: 1.15;
	text-transform: uppercase;
	font-family: "WildHaggis", serif;
	letter-spacing: .15rem;
	background-image: url("/splashes/heading.svg");
	background-size: cover;
	background-repeat: round;
	color: white;
	text-align: center;
	padding: 0 20px;
	text-shadow:
		-1.1px -1.1px 0.5px #262425,
		 1.1px -1.1px 0.5px #262425,
		-1.1px  1.1px 0.5px #262425,
		 1.1px  1.1px 0.5px #262425;
}
h1 { font-size: 220% }
h2 { font-size: 150% }
h3 { font-size: 130% }

/* overflow code snippets to right of screen rather than
	 making the page larger than the screen, causing scrolling
	 to be awkward for the whole page. Now, scrolling is only required
	 for the code snippets. */
pre {
	overflow-x: auto;
	overflow-y: hidden;
	/* code doesn't go too close to top-bottom broders */
	padding: 10px;
	line-height: 1.1;
}