/* projects.html css */
hgroup.projects.main.heading {
	padding: 2.5em 1em 1em;
	background: url('../images/projects.svg');
	background-size: 100% 100%;
	box-shadow: 1ex 1em var(--dblack);
}

/* make each project article look like a labelled folder */
article.projects {
	margin: 1em 0;

	/* folder label */
	h2 {
		margin: 0;
		display: inline-block;
		background: var(--lyellow);
		padding: .5em 1ex 0;
		/* look like a folder even if heading is long or short */
		max-width: 61.8%;
		min-width: 23.6%;
		/* creative z-index usage to save on using filters */
		position:relative;
		box-shadow: .5ex .5em var(--dblack);
		z-index: -1;
	}

	/* the inside of a folder */
	div.contents {
		overflow: auto; /* expand for floating elements */
		margin: 0 1ex 2em 0;
		padding: 1em 1ex;
		background: var(--lyellow);
		box-shadow: 1ex 1em var(--dblack);

		/* at the moment, thumbnails can exceed the size of the text beside them.
		 * I have decided this is fine for now.
		 * Ideally, thumbnails should shrink in height to the size of the text beside them
		 * or the textbox should "expand" (with padding-bottom),
		 * but I can't figure out how to do that.
		 */
		.thumbnail {
			max-width: 50%;
			margin: 1em 2em 1em 1ex;
			/* FIXME float isn't really recommended anymore,
			 * is it? Like, I'm using them how they're intended,
			 * but their behaviour is inherently funky and
			 * difficult to predict.
			 */
			float: left;

			.picture img {
				width: 100%;
				margin: 0;
			}
		}
	}

}