index.css

@import url(https://fonts.googleapis.com/css?family=Dr+Sugiyama);

body {
	padding: 0;
	margin: 0;
	font: 100%/1.5 Helvetica Neue, sans-serif;
}

code {
	font-family: Consolas, Monaco, monospace;
	white-space: nowrap;
}

a {
	color: hsl(190, 80%, 40%);
}

	a:not(:hover) {
		text-decoration: none;
	}

h1 {
	margin: .5em 0;
	font: 250%/1 'Dr Sugiyama', cursive;
}

body > header,
body > section,
body > footer {
	padding: 1em calc(50% - 23em)
}

body > header {
	background: radial-gradient(at 50% 90%, hsl(190, 80%, 56%) 10%, hsl(190, 80%, 44%));
	text-align: center;
	color: white;
	padding-bottom: 3em;
	font-weight: bold;
	font-size: 120%;
}

	body > header h1 {
		font-size: 500%;
	}

	body > header a {
		color: hsla(0,0%,100%,.8);
	}

	body > header a:hover {
		color: white;
	}

	body > header code {
		font-size: 88%;
	}

	body > header a[download] {
		display: inline-block;
		margin: 0 .2em;
		color: white;
		border: .12em solid white;
		padding: .2em .6em;
		border-radius: .35em;
		text-decoration: none;
	}

		body > header a[download]:hover {
			background: white;
			color: hsl(190, 80%, 50%);
		}

.demo {
	width: -moz-max-content;
	width: max-content;
	padding: 0;
	text-align: center;
	transform: scale(1.5);
	transform-origin: 50% 0;
	margin: 2em auto;
}

	.demo input {

	}

body > section h1 {
	color: hsl(190, 80%, 42%);
}

#pros-cons {
	display: flex;
}

	#pros-cons > section {
		flex: 1;
	}

	#pros-cons > section:nth-of-type(2) {
		margin-left: 1em;
	}

ul {
	padding-left: 0;
	list-style: none;
}

	.pros li,
	.cons li {
		text-indent: -1em;
	}

	.pros li::before,
	.cons li::before {
		width: .8em;
		padding-right: .2em;
		font-size: 120%;
	}

	.pros li::before {
		content: "✓";
		color: hsl(80, 60%, 50%);
	}

	.cons li::before {
		content: "✘";
		color: hsl(0, 60%, 55%);
	}

	#pros-cons section:first-of-type ul {
		padding-right: 1em;
	}

body > footer {
	background: #333;
	color: white;
}

.github-ribbon {
	position: absolute;
	top: 0;
	left: 0;
	transform: rotate(90deg) translateX(70.71068%) rotate(-90deg) rotate(-45deg) translateY(-100%);
	transform-origin: 0 0;
	padding: .4em 3em;
	background: black;
	text-decoration: none;
	color: white;
	box-shadow: 0 0.1em 0 0.1em rgba(0, 0, 0, 0.15);
	font-weight: bold;
}

	.github-ribbon:hover {
		background: hsl(25, 100%, 50%);
		color: black;
	}


/* IE */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.demo {
		max-width: 66.67%;
		text-align: left;
	}
}