/* Color scheme
 * No colors are used in the stylesheet that are not defined here. */
:root {
	--white: #dee;
	--black: #000;
	--yellow: #fd7;
	--darkyellow: #ca7;
	--purple: #102;
}

/* We don't change much doc-wide.
 * At one point I used monospace on everything but honestly it's kind of an eyesore.
 * Let's go with browser-defined sans-serif and only use mono where it's needed. */
body {
	color: var(--white);
	background-color: var(--purple);
	font-family: sans-serif;
	line-height: 1.2;
	margin: 0;
	padding: 0;
}

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

a:hover {
	background-color: var(--purple);
	color: var(--white);
}

/* Color all headings */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--darkyellow);
}

/* I only use h1 for panel headers and want headers closer to the top. */
h1 {
	margin-top: 0;
	font-size: 20px;
}

h2 {
	font-size: 18px;
}

h3 {
	font-size: 16px;
}

/* Inject Markdown-esque header indicators. These won't muck with interactions
 * with the page that don't do styles like text browsers and, I hope, screen
 * readers. */
h1:before {
	content: "# ";
}

h2:before {
	content: "## ";
}

h3:before {
	content: "### ";
}

h4:before {
	content: "#### ";
}

h5:before {
	content: "##### ";
}

h6:before {
	content: "###### ";
}

/* We need to specially higlight pre and code blocks. We use a dashed
 * darkyellow border for this. We also force wrapping of this content when
 * it's absolutely forced by page width. */
p code,
pre {
	border: 1px dashed var(--darkyellow);
	padding: 1px 4px 1px 4px;
	white-space: pre-wrap;
	font-family: monospace;
}

/* Don't show table outer borders and collapse together inner ones. Without
 * this the gap between each cell renders two borders: one for each cell.
 * Don't want that.*/
table {
	border-collapse: collapse;
	border-style: hidden;
}

/* Here's the borders for between cells. */
td,
th {
	border: 1px dashed var(--darkyellow);
}

/* This is hacky. Blogpost templates don't have a content pane (the black
 * field the content goes in). Instead, each post is its own mini content pane
 * so we get a clean purple bar between each blog post.
 * This can likely be better done with multiple content panes with a bottom
 * margin. */
.blogpost {
	border-bottom: 1rem solid var(--purple);
	background-color: var(--black);
	padding: 1rem;
	width: 85%;
	margin: auto;
}

/* Black field page content goes in. Nothing fancy here */
.content {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0.5rem;
	padding: 1rem;
	background-color: var(--black);
	width: 85%;
}

/* This is the black bar at the top of the page. The nav links are actually
 * a list, with the list styling removed so they render like normal text. */
.navbar {
	background-color: var(--black);
	margin: auto auto 1rem auto;
	padding: 0.5rem 1rem 0.5rem 1rem;
	width: var(--width);
	list-style-type: none;
	font-weight: bold;
}

/* Don't block each list item into its own line. */
.navbar li {
	display: inline;
}

/* Blog post images try to flow with the post. This resizes each image to 75%
 * of the width of the content pane, but caps that resize to 400px vertically
 * so tall images don't just balloon out of control. Each post has a link to
 * its own unresized self so if this goes wild a user can click the image for
 * the original. */
.blogimg {
	display: block;
	max-height: 400px;
	width: 75%;
	object-fit: contain;
	margin: auto;
}

/* This is the landing page link list. Same trick as navbar to de-style the
 * list. */
.navlist {
	list-style-type: none;
}

/* Render each list item in the navlist in the middle of a black box with its
 * own special styling. */
.navlist li {
	text-align: center;
	font-size: 1.1rem;
	font-weight: bold;
	width: 20rem;
	border: none;
	background-color: var(--black);
	margin: 1rem auto 1rem auto;
	padding: 1.5rem;
}

/* If you hover one of those black boxes, turn it black on yellow. */
.navlist li:hover {
	background-color: var(--yellow);
}

.navlist li:hover a {
	color: var(--black);
}

/* Re-asset the actual link hover colors. This is messy and needs reworking. */
.navlist li:hover a:hover {
	background-color: var(--yellow);
	color: var(--purple);
}

/* Try to size up the twitch embed in the livestream page to be as big as
 * possible. Due to the nature of the embed, we have to resize an iframe
 * inside too, to force the video feed to resize properly.
 * This should likely go in an in-page <style> instead. */
#twitch-embed {
	width: 100%;
	height: 75%;
	margin: auto;
	padding-bottom: 1rem;
}

#twitch-embed iframe {
	width: 100%;
	height: 100%;
}