/* Common page structure */
body {
	margin-top: 72px;
	
	background-color: #fefefe;
	background-attachment: fixed;
	background-image: linear-gradient(white 104px, #efefef 50%);
	
	color: #030303;
	font-family: sans-serif;
	font-size: 12pt;
}

.header {
	z-index: 2;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 32px;
	padding: 8px 8px 0;
	overflow: visible;
	text-align: center;
	white-space: nowrap;
	
	background-color: hsl(0, 0%, 20%);
	color: white;
	
	box-shadow: 0 0 32px 24px white;
}
	.logo {
		float: left;
		margin: 0 -16px;
		
		font-size: 1px;
		color: transparent;
	}
		.logo img {
			height: 64px;
		}
			.logo img.logo-icon {
				display: inline-block;
			}
			.logo img.logo-short,
			.logo img.logo-long {
				display: none;
			}
	.nav-link {
		box-sizing: border-box;
		display: inline-block;
		font-size: 24px;
		height: 40px;
		padding: 5px;
		margin: -8px -6px;
		
		color: inherit;
		font-family: 'Denmark', sans-serif;
		text-decoration: none;
		text-transform: uppercase;
		transform: scaleX(0.9);
		letter-spacing: 0.05em;
		
		position: relative;
	}
		.nav-link:hover,
		.nav-link:focus {
			background-color: hsl(0, 0%, 25%);
			color: inherit;
			outline: 0 none;
		}
		.nav-link:active {
			background-color: hsl(0, 0%, 30%);
			color: inherit;
		}

.footer {
	text-align:center;
	font-size: 60%;
	margin: 1em;
}

.feed-links a {
	text-decoration: none;
}
.feed-links svg {
	width: 24px;
	height: 24px;
	margin: 0 8px;
	transform: scale(1.25);
}
	.header .feed-links {
		float: right;
		display: none;
	}
		.header .feed-links svg {
			fill: white;
		}
	.footer .feed-links {
		display: block;
	}

header {
	text-align: center;
	margin: 0;
}

.main {
	display: block;
	width: 100%;
	max-width: 768px;
	margin: 0 auto;
	padding: 8px;
	box-sizing: border-box;
	
	background-color: white;
	
	position: relative;
}

@media (min-width: 412px) {
	.nav-link {
		padding-left: 12px;
		padding-right: 12px;
	}
}
@media (min-width: 560px) {
	.logo {
		margin: 0;
	}
	.nav-link {
		font-size: 40px;
		padding: 2px 4px;
	}
		.nav-link::before {
			display: block;
			position: absolute;
			left: 4px;
			top: 100%;
			transform: rotateZ(180deg) translateY(9px);
			
			content: attr(data-text);
			color: hsl(0, 0%, 20%);
		}
			.nav-link:hover::before,
			.nav-link:focus::before {
				color: hsl(0, 0%, 25%);
			}
			.nav-link:active::before {
				color: hsl(0, 0%, 30%);
			}
	
	header,
	header.main {
		margin-top: 96px;
		padding: 0;
	}
}
@media (min-width: 760px) {
	.logo img.logo-short {
		display: inline-block;
	}
	.logo img.logo-icon,
	.logo img.logo-long {
		display: none;
	}
	.nav-link {
		padding-left: 16px;
		padding-right: 16px;
	}
		.nav-link::before {
			left: 16px;
		}
	
	.main::before,
	.main::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		width: 96px;
		max-width: calc(100vw - 768px - 112px); /* I am honestly not sure why 112 seems to be the magic number. */
		z-index: -1;
	}
	.main::before {
		right: 100%;
		background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	}
	.main::after {
		left: 100%;
		background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	}
}
@media (min-width: 932px) {
	.header .feed-links {
		display: inline-block;
	}
	.footer .feed-links {
		display: none;
	}
}
@media (min-width: 1320px) {
	.logo img.logo-long {
		display: inline-block;
	}
	.logo img.logo-icon,
	.logo img.logo-short {
		display: none;
	}
}