:root {
	--box-border: palevioletred;
	--box-border-alt: paleturquoise;

	--box-background: #393344;
	--box-background-alt: var(--background-dim);

	--nav: lightcoral;
}

/* MARK: 3 Boxes
*/
nav,
#tools,
main {
	max-width: var(--pwidth);
	margin: 0 auto;
}

nav {

	/* div things to create separators between links in horizontal list */
	div {
		display: inline;
	}

	div::before {
		content: '~';
		margin: 0 0.25rem;
	}

	div:first-of-type::before {
		content: none;
		margin: 0;
	}
}

#tools {
	max-width: var(--pwidth);
	width: fit-content;

	/* shove the tools box all the way left */
	/* give it a slight top-margin so on mobile it's not against nav */
	margin: 0.25rem 0 0 auto;

	a {
		color: var(--nav);
	}
}

/* style titles for nav/tools: h2 is nav, h3 is tools */
nav,
#tools {

	h2,
	h3 {
		font-size: 1.1em;
		margin: 0;
		padding: 0;
	}

	h2 {
		width: 100%;
		text-align: right;
	}
}

main {
	width: min(96vw, var(--pwidth));
	margin: 0 auto;
}

article {
	height: 100%;
}

.box {
	border: 1px solid var(--box-border);
	background-color: var(--box-background);
	padding: 0.5rem 0.5rem;

	a {
		color: var(--nav);
	}

	:first-child {
		margin-top: 0;
	}

	/* article.box */
	&:where(article) {
		border: 1px solid var(--box-border-alt);
		background-color: var(--box-background-alt);
	}
}

.box-alt-color {
	border-color: var(--box-border-alt);
	background-color: var(--box-background-alt);
}

/* MARK: Preview */
/* here instead of in forms so we can leave forms out and better simulate a real page */
body#preview {
	padding: 1rem;

	&>p:first-of-type {
		margin-top: 0;
	}
}

/* MARK: Wide//3 Boxes
*/
@media (min-width: 50rem) {
	body {
		display: flex;
		flex-direction: row;
		column-gap: 1rem;
	}

	nav,
	main,
	#tools {
		margin: unset;
	}

	/* The below: Positions "boxes" such as Nav - Main - Tools*/
	nav {
		order: 1;
		flex: 0 1;
		height: fit-content;

		/* show links in row */
		display: flex;
		flex-direction: column;
		row-gap: 0.5rem;

		/* don't break link text */
		text-wrap: nowrap;

		/* push down a bit below top of main; for flair */
		margin-top: 3rem;

		/* don't make between-link separators */
		div::before {
			content: none;
		}
	}

	main.page {
		order: 2;
		flex: 0 0 35rem;
		min-height: 50vh;
	}

	#tools {
		order: 3;
		flex: 0 1;
		height: fit-content;

		/* push down a lot below top of main; for flair */
		margin-top: 8rem;
		text-align: right;
	}
}