:root {
	--background: #ffffff;
	--base-color: #101010;
	--paper-color: #fff;
	--nav-background: #f7f7f7;
	--font-family-base: Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;
	--font-family-headline: Futura,"Trebuchet MS",Arial,sans-serif;
	--font-size-base: 16px;
	--font-size-h1: 1.6rem;
	--font-size-h2: 1.4rem;
	--box-shadow-default: rgba(0, 0, 0, 0.2);
}
html, body {
	background: var(--background);
	font-family: var(--font-family-base);
	font-size: 16px;
	color: var(--base-color);
	padding: 0;
	margin: 0;
}

body, body * {
	box-sizing: border-box;
}

nav {
	background: var(--nav-background);
	padding: 1rem;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
	flex-direction: column;
}

h1, h2 {
	font-family: var(--font-family-headline);
	color: var(--base-color);
}

h2 {
	font-size: var(--font-size-h1);
}

blockquote {
	margin: 0;
	padding: 3rem 1rem;
	font-style: italic;
}


.page {
	max-width: 100ch;
	margin: 0 auto;
}

section {
	padding: 1rem;
}

.nav-logo__link img {
	height: 3rem;
	width: auto;
}

.nav-menu {
	padding: 1rem 1rem 0;
}
.nav-menu a {
	color: var(--base-color);
	text-decoration: none;
	padding: 0 0.5rem;
}

.nav-menu a:hover {
	text-decoration: underline;
}

.post-list {
	margin:0;
	padding: 0;
	display: grid;
	grid-gap: 5rem;
}

.post-list__item {
	display: block;
	list-style: none;
}

.card {
	display: flex;
	align-items: center;
}

.card__thumb img {
	width: 220px;
}

.card__thumb span {
	display: block;
	background: var(--nav-background);
	width: 220px;
	height: 124px;
	color: transparent;
	text-decoration: none;
}

.card__description {
	padding: 1rem;
}

.card__headline {
	font-family: var(--font-family-headline);
	font-size: var(--font-size-h2);
	color: var(--base-color);
	text-decoration: none;
}

.post-media iframe {
	width: 100%;
	margin: 0 auto;
	min-height: 50ch;
}

.post--content--text {
	padding: 1rem;
}