:root {
	--indent-mult: 1rem;
}

html {
	overflow-y: scroll;
}

body {
	background: url("/resources/Mortar-purple.png");
	background-color: #c8c1e4;
	/* Slightly improves readability against the background */
	text-shadow: 0px 0px 0.4em #fff;
	font-family: "Comic Sans MS", "Comic Sans", sans-serif;
}

@media screen and (max-width: 600px) {
	:root {
		--indent-mult: 0.5rem;
	}
}

div#title {
	text-align: center;
	font-size: 200%;
}

div#content {
	max-width: 250mm;
	margin: 10mm auto;
}

nav {
	text-align: center;
}

footer {
	margin: 10mm auto;
}

/* use the first heading to set <title> but hide it */
h1:first-child {
	display: none;
}

a {
	color: #64c;
}

a:hover {
	filter: brightness(150%);
}

nav.icons {
	margin: 0 auto;
	max-width: 100%;
	display: block;
}

nav.icons div {
	display: block;
	width: fit-content;
	margin: 0 auto;
	text-align: left;
}

.bigicon:not(img, a) {
	font-size: 200%;
	line-height: 64px;
	display: block;
}

a.bigicon {
	text-decoration: none;
}

img.bigicon {
	display: inline;
	vertical-align: middle;
	padding-right: 0.5em;
	image-rendering: crisp-edges;
	width: 64px;
	height: 64px;
}

img:not(.icon, .icon-link, .no-box, .bar, .bigicon) {
	/* Resize images if the window is small */
	max-width: calc(100% - var(--indent-mult) * 6);
	/* Background color makes diagrams look ok in dark mode,
	 * the border+margin makes the background color look less dumb
	 * (and the 3D effect grooved border has a dope 90s look) */
	background-color: #ddd;
	border: 6px groove;
	padding: 1rem;
	margin: 0 auto;
	display: block;
}

div#badges img {
	/* Override some of the previous stuff, I'm not very good at css bc
	 * surely there's a way to make those not apply to badges in the
	 * first place */
	background-color: none;
	border: 0;
	margin: 0 0.5rem 0 0;
	padding: 0;
	display: inline;
}

img.icon, img.icon-link {
	display: inline;
	vertical-align: middle;
	padding: 0.125em 0.5em;
	width: 20px;
	height: 22px;
	line-height: 22px;
	image-rendering: crisp-edges;
}

img.bar {
	display: block;
	max-width: 100%;
	margin: 0 auto;
}

img.icon-link {
}

.colorize {
	color: #64c;
}

p, ul, ol, table, pre, form {
	margin-left: calc(var(--indent-mult) * 3);
}

li p {
	margin: 0;
}

h1 {
	border-top: 2px solid #64c;
	padding-top: 1rem;
}

h2 {
	margin-left: calc(var(--indent-mult) * 1.5);
}

h3 {
	margin-left: calc(var(--indent-mult) * 1.5);
}

ul {
	list-style-type: square;
}

div.aside {
	margin-left: calc(var(--indent-mult) * 4);
	margin-right: calc(var(--indent-mult) * 4);
	/*border: 2px solid #64c;*/
	color: #64c;
	background-image: url('/resources/icons/hand.right.gif');
	background-repeat: no-repeat;
	background-position: 2px 1ex;
	background-clip: padding-box;
	padding: 0.5rem 0.5rem 0.5rem 30px;
}

pre, form {
	background-color: rgba(0, 0, 0, 0.2);
	border-left: 1px solid #64c;
	padding: 1rem;
	overflow-x: auto;
	text-shadow: 0px 0px 0.2em #ccc;
}

form {
	border-left: 6px double #64c;
	overflow-x: auto;
}

input[type=text] {
	background-color: #eee;
	color: #64c;
	font-family: monospace;
	width: 10em;
}