style.css

body {	
	max-width: 50rem;
	padding: 1rem;
	margin: auto;
	background: hsl(35, 80%, 94%);
	color: hsl(35, 50%, 20%);
	text-shadow: 0 1px 1px white;
	font: 120%/1.6 Baskerville, Palatino Linotype, Palatino, serif;
}

a {
	color: #58a;
}

h1 {
	text-align: center;
	font-weight: 600;
}

	section > h1 {
		margin-top: 2em;
	}

h2 {
	color: hsl(35, 50%, 40%);
	font-weight: 600;
	font-size: 120%;
}

ul {
	margin: 0;
	padding-left: .8em;
}

strong {
	font-weight: 600;
}

abbr {
	border-bottom: .1em dotted hsl(40, 80%, 40%);
	cursor: help;
}

input, button {
	font: inherit;
	text-shadow: inherit;
}

button {
	padding: .1em .5em;
	border-radius: .3em;
	background: hsl(80, 80%, 80%);
	background: linear-gradient(hsl(40, 70%, 80%), hsl(40, 70%, 70%));
	border: 1px solid rgba(0,0,0,.3);
	box-shadow: 0 1px white inset, 0 .3em .3em -.3em rgba(0,0,0,.3);
}

input {
	width: 12em;
	padding: .1em .3em;
	border: 0;
	border: 1px solid hsl(35, 80%, 60%);
	background: hsla(0,0%,100%,.2);
	border-radius: .3em;
	box-shadow: .05em .1em .3em rgba(0,0,0,.3) inset;
}

@keyframes pulsate {
	to {
		box-shadow: .05em .1em .3em rgba(0,0,0,.3) inset, 0 0 .3em .1em #58a;
	}
}

input:focus {
	outline: none;
	border: 1px solid #58a;
	animation: pulsate 2s infinite alternate linear;
	background: hsla(0,0%,100%,.5);
}

header {
	max-width: 37rem;
	margin: 0 auto 2em;
	text-align: center;
	font-size: 150%;
	font-style: italic;
}

	header h1 {
		margin: .1em 0;
		text-align: center;
		color: hsl(35, 50%, 40%);
		font-size: 400%;
		line-height: 1;
		font-style: italic;
		font-weight: normal;
	}
	
	header p {
		margin: 0;
	}
	
		header p a {
			text-decoration: none;
			color: inherit;
		}
	
	.size {
		position: absolute;
		top: 1em;
		right: 1em;
		width: 4em;
		padding: .8em .6em 1em;
		background: hsl(40, 80%, 40%);
		color: hsl(35, 80%, 94%);
		text-shadow: none;
		text-align: center;
		line-height: 1.1;
		text-indent: -.1em;
		outline: .1em dotted;
		outline-offset: -.3em;
		text-decoration: none;
		border-radius: .15em;
	}
	
	.size:hover {
		background: #58a;
	}
	
		.size strong {
			display: block;
			margin-bottom: .1em;
			font-size: 150%;
			line-height: 1;
			font-weight: 900;
			font-style: normal;
		}
		
		.size .amp {
			position: absolute;
			left: 0; right: 0;
			bottom: 0;
			color: hsla(35, 80%, 94%,.3);
			font-size: 350%;
		}
	
	nav {
		margin-top: .5em;
	}
	
	nav a {
		position: relative;
		display: inline-block;
		padding: 0 .4em;
		margin: 0 .1em;
		
		color: hsl(35, 80%, 94%);
		text-shadow: none;
		text-decoration: none;
		font-size: 80%;
	}
	
	nav a::before {
		content: "";
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		z-index: -1;
		border-radius: .2em;
		background: hsl(40, 80%, 40%);
		-webkit-transform: skew(-16deg);
		transform: skew(-16deg);
	}
	
	nav a[href="#download"] {
		font-weight: 600;
	}
	
	nav a[href="#download"]::before {
		background: hsl(65, 85%, 35%);
	}
	
	nav a:hover::before {
		background: #58a;
	}
	

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: hsl(35, 70%, 88%);
	font-size: 80%;
	border-radius: .3em;
}

footer {
	padding: .6em;
	border-top: 1px solid rgba(0,0,0,.3);
	margin-top: 1em;
	text-align: center;
}

pre {
	position: relative;
}

pre::before {
	position: absolute;
	top: 0;
	right: .5em;
	padding: .3em .4em;
	border-radius: 0 0 .3em .3em;
	background: hsl(35, 50%, 60%);
	color: hsl(35, 80%, 90%);
	text-shadow: none;
	font: bold 100%/1 Baskerville, Palatino Linotype, Palatino, serif;
}

pre.language-markup::before {
	content: "HTML";
}

pre.language-javascript::before {
	content: "JS";
}

table {
	table-layout: fixed;
	border-spacing: 0;
	border-collapse: collapse;
}

th {
	font-size: 75%;
}

td {
	vertical-align: top;
	padding: .5em;
	border: 1px solid rgba(0,0,0,.1);
}

:not(pre) > code[class*="language-"] {
	background: none;
}

.twitter-share-button {
	position: absolute;
	top: 1em;
	left: 1em;
}

#carbonads {
	position: absolute;
	top: 100%;
	top: calc(100vh - 15em);
	right: 1em;
	max-width: 10em;
	max-width: -webkit-min-content;
	max-width: min-content;
	font-size: 75%;
}
	
	#carbonads a {
		text-decoration: none;
		color: inherit;
	}
	
	#carbonads img {
		display: block;
	}