:root {
	--sans-type: "Futura", sans-serif;
	--serif-type: "Baskerville", serif;

	--colour-primary: #00938e;
	--colour-secondary: #666;
	--colour-links: #00f;
	--colour-text: #111;
	--colour-background: #fff;
	--colour-text-blocks: #ddd;

	--spacing-unit: 0.5rem;
	--text-unit: 1rem;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	line-height: inherit;
}

body {
	color: var(--colour-text);
	background: var(--colour-background);
	font-family: var(--sans-type);
	font-size: var(--text-unit);
}

a {
	color: var(--colour-links);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--sans-type);
	font-weight: normal;
}

ul,
ol {
	list-style-position: inside;
}

ul ul li {
	padding-left: var(--spacing-unit);
}

.inline_list {
	display: inline;
	list-style-type: none;
}

.inline_list li {
	display: inline;
}

.inline_list li+li:before {
	content: " / ";
	padding: var(--spacing-unit) 0rem;
}

/* layout */

#wrapper {
	padding: var(--spacing-unit);
	max-width: 80rem;
}

#wrapper header {
	margin-bottom: calc(2 * var(--spacing-unit));
}

#site_title {
	font-size: calc(var(--text-unit) * 2);
}

main {
	margin: calc(2 * var(--spacing-unit)) 0;
}

.single>header {
	margin: var(--spacing-unit) 0;
}

.single>header h2 {
	font-size: calc(var(--text-unit) * 4);
}

.content {
	font-size: calc(var(--text-unit) * 1.5);
	margin: var(--spacing-unit) 0;
}

.content p,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
	margin: calc(var(--spacing-unit) * 1.5) 0;
}

.content img,
.content p img,
.content p video {
	max-width: 100%;
}

main sidebar {
	display: block;
	margin: var(--spacing-unit) 0;
}

#site_footer {
	display: block;
	margin: calc(var(--spacing-unit) * 3) 0;
}

.home .projects {
	list-style-type: none;
	display: grid;
	row-gap: var(--spacing-unit);
	column-gap: var(--spacing-unit);
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(1, minmax(3rem, 1fr));
}

.projects li {
	min-height: calc(var(--spacing-unit) * 20);
}

.projects article {
	background: #ddd;
	background-image: var(--cover-image);
	background-size: cover;
	background-position: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: start;
}

.projects article h2 a,
.projects article p {
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(3px);
	text-shadow: 1px 1px 0px #fff;
}

.projects article h2 a {
	text-decoration: underline;
}

.projects article p {
	display: inline;
}

@media (min-width: 800px) {
	:root {
		--spacing-unit: 1rem;
	}

	.content {
		font-size: calc(var(--spacing-unit) * 1.5);
	}

	.home .projects {
		grid-template-columns: repeat(4, 1fr);
	}

	.projects li {
		min-height: calc(var(--spacing-unit) * 8);
	}

	.single {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
		row-gap: var(--spacing-unit);
		column-gap: var(--spacing-unit);
	}

	.single header {
		grid-column-start: 1;
		grid-column-end: 3;
	}

	.single .content {
		grid-column-start: 1;
		grid-column-end: 5;
	}

	.single footer {
		grid-column-start: 4;
		grid-column-end: 5;
	}

	.single sidebar {
		grid-column-start: 2;
		grid-column-end: 4;
	}

	.single {
		margin-bottom: calc(--var(--spacing-unit) * 4);
	}
}