/*
 * These are Roboto fonts, from Google.
 * If you have privacy concerns, block fonts.googleapis.com in your
 * content blocker, e.g. uBlock Origin.
 */
/* Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/* Roboto Mono */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

body {
	background: #FFFFea;
	font-family: "Roboto", "Helvetica Neue", "Helvetica", "Liberation Sans", sans-serif;
}

code {
	font-family: "Roboto Mono", "Courier New", "Courier", monospace;
}
nav, nav a {
	background-color: rgb(140,170,230) !important;
	color: black !important;
}
nav img {
	float: right;
	padding-right: 1em;
}

.hero {
	background-color: #eaFFFF;
	border-color: #8888cc;
	border-radius: 10px;
	border-style: solid;
	margin: 3em auto;
	max-width: 50dvw;
	padding: 20px;
	text-align: center;
}
.hero img {
	image-rendering: pixelated;
	transform: scale(3);
}
.hero .fl {
	float: left;
	transform-origin: top left;
}
.hero .fr {
	float: right;
	transform-origin: top right;
}

.mobile-gopher {
	display: none;
}

article {
	margin: 3em;
	max-width: 75dvw;
	text-indent: 2em;
}
article img {
	float: right;
}
article h2 {
	border-bottom: solid;
	max-width: 35dvw;
}

a {
	text-decoration: none;
}
a:link, a:visited {
	color: blue;
}
a:hover, a:active {
	color: red;
}

pre {
	overflow-x: auto;
}

/* Mobile Users */
@media (max-width: 800px) {
	article {
		margin: auto;
		max-width: 100dvw;
		text-indent: 0em;
	}
	.hero {
		max-width: 90dvw;
	}
	article img {
		display: none;
	}
}
@media (max-width: 490px) {
	.hero {
		max-width: 90dvw;
	}
	.hero img {
		display: none;
	}
	.mobile-gopher {
		display: inline;
		image-rendering: pixelated;
		margin: 3em;
		text-align: center;
		transform: scale(3);
	}
}

/*
 * This fixes a bug with min.css
 * <nav> wasn't really intended to have
 * its background color changed, so it
 * puts weird holes in the the custom
 * color on mobile. These rules seem
 * to remedy that:
 */
.nav a:hover {
	background-color:rgba(0,0,0,0);
}
.btn.btn-close {
	background-color:rgba(0,0,0,0);
}
div:before {
	background-color:rgba(0,0,0,0);
}

@media (max-width: 500px) {
	.btn.btn-close {
		display: none;
	}
	div:before {
		display: none;
	}
}