body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	color: white;
	background: #061730;
	line-height: 1.4rem;
}

/* Headers */

.h1 {
	display: block;
	font-size: 2rem;
	margin: 0 0 2rem 0;
	line-height: 2.25rem;
}

@media screen and (max-width: 1000px) {
	.h1 {
		margin: 0 0 1rem 0;
	}
}

.h2 {
	margin: 0 0 .75rem 0;
	display: block;
	font-size: 1rem;
	font-weight: 500;
	opacity: .6;
}

.h3 {
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.75rem;
	margin: 0;
}

/* Global elements */

header, main, footer {
	margin: 3rem auto;
}

@media screen and (max-width: 1000px) {
	header, main, footer {
		margin: 1rem auto;
	}
	header {
		margin-top: 1.5rem;
	}
	footer {
		margin-bottom: 1.5rem;
	}
}

header p {
	 font-size: 1.5rem;
	 line-height: 2rem;
	 max-width: 760px;
	 opacity: .8;
}

header img {
	max-height: 75px;
	width: auto;
}

footer {
	opacity: .6;
}

pre {
	font-size: .9rem;
}

p {
	margin: 1rem 0;
}

img {
	margin: 0;
	padding: 0;
	height: auto;
	max-width: 100%;
}

figure {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: underline;
	color: white;
}

a:hover {
	text-decoration: none;
}

figcaption {
	font-size: .9rem;
	opacity: .8;
	text-align: center;
	width: 50%;
	margin: .5em auto;
}

/* Global containers */

.narrow {
	margin-left: auto;
	margin-right: auto;
	max-width: 960px;
}

@media screen and (max-width: 1000px) {
	.narrow {
		max-width: 86vw;
	}
}

.medium {
	margin-left: auto;
	margin-right: auto;
	max-width: 1024px;
}

.wide {
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
}

/* Home page */

.promo {
	margin: 3rem 0;
	display: flex;
	flex-direction: row;
}

@media screen and (max-width: 1000px) {
	.promo {
		display: block;
		margin: 1rem 0;
	}
}

.promo ul {
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
}

.promo li {
	margin-bottom: .3rem;
}

.promo article{
	flex: 3;
	margin-right: 1.5rem;
}

.promo p:first-of-type {
	margin-top: .75rem;
}

@media screen and (max-width: 1000px) {
	.promo article{
		margin: 1.5rem auto;
	}
}

.promo article:first-child {
	flex: 4;
}

/* Album */
.album {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 3rem;
	justify-items: center;
	align-items: center;
}
.album figure img {
	filter: none;
}

.album .featured {
	grid-column-start: 1;
	grid-column-end: 3;
}

@media screen and (max-width: 1000px) {
	.album {
		grid-template-columns: repeat(1, 1fr);
		grid-column-gap: 1.5rem;
	}
	.album .featured {
		grid-column-start: auto;
		grid-column-end: auto;
	}
}

/* Post */
.post h2 {
	margin-top: 2rem;
}

.post .narrow > * {
	max-width: 640px;
}

.post .syntax {
	margin: 1rem 0;
	width: 100%;
	background: #030b18;
}

.post .syntax pre {
	background: none;
	margin: 0 auto;
	padding: 1.5rem 0;
	max-width: 960px;
	overflow-x: auto;
}

.post .narrow .syntax pre {
	padding: 1rem 1.25rem;
}

.post img {
	margin: auto 0;
	height: auto;
	width: auto;
	max-width: 100%;
	max-height: 800px;
	/* filter: grayscale(100%); */
}

.post figure {
	margin: 2rem 0;
	text-align: center;
}

.post li {
	margin: 1rem 0;
}

@media screen and (max-width: 1000px) {
	.post .syntax pre {
		max-width: 85vw;
	}

	.post img {
		margin: .5rem 0;
	}
}