style.css

/* Reset Styles */
body, html {
	margin: 0;
	padding: 0;
}


/* Main Layout and Visual Styling of Block Elements */
body {
	font: 15px Roboto, sans-serif;
}

.wrapper {
	max-width: 44em;
	margin: 0 auto;
	padding: 1em;
}

.welcome-text {
	max-width: 44em;
	margin: 0 auto; /* Center it on screen */
	text-align: center;
}

.form-section {
	padding: 0.8em 1em;
	margin: 0.5em 0;
	border: 1px solid #333;
	border-radius: 0.2em;
	box-shadow: 0.1em 0.2em 0.4em #ECECEC;
}

/*
	Form Controls
 */

input[type="number"] { width: 3.5em; }
input[type="number"][name="timeLimit"] { width: 2.5em; }

form.drill-options {
	margin: 0.8em 0 0.1em 0;
	box-sizing: border-box;
}

form.drill-options input,
form.drill-options button {
	padding: 0.1em 0.6em;
	margin: 0.5em 0.2em;
}

form.drill-options input[type=radio]:first-child + label {
	margin-right: 1em;
}
form.drill-options input[type=radio] + label {
	cursor: pointer;
}

a, a:visited {
	color: #167EE8;
}

#lesson { font-size: 1.3em; }

.scroll-bounds {
	margin-top: 1em;
	margin-bottom: 0.3em;
	overflow: hidden;
}

.scroll-margin { margin-left: 7em; }

.answer {
	background: #ccc; display: block; height: 1.2em;
	border: 1px solid #C2C2C2;
	padding: 0.5em;
}
#answer:not(.answer) {
	text-align: center;
}

.answer:focus {
	outline: none;
	border: 1px solid #A0A0A0;
}

.prompt { color: #666; }

.correct { background: #cfc; }
.incorrect { background: #fcc; }


.clock { font-size: 300%; text-align: center; }

.center { text-align: center; }


/* Configure these to tune the stroke display to your liking. */

/* Setting it to `smaller` usually means about 83% (1 / 1.2),
 * but there's no standard. */
#strokes {
	font-size: 14px;
	font-weight: bold;
	opacity: 1;
}

#strokes td {
	background: #666;
	border: thin solid black;
	border-radius: 0.5ex;
	padding: 0.25ex 0.33ex;
	text-align: center;
}

#strokes .numberBar { height: 0.5em; margin: 0; padding: 0; }
#strokes td.wide { width: 2em; }
#strokes .leftVowel { transform: translate(+0.8em, 10%); }
#strokes .rightVowel { transform: translate(-0.8em, 10%); }

#strokes table tr td.pressed {
	color: #400;
	background: #dd4;
}

#strokes td.alt {
	color: #444;
	background: #999;
}

#strokes > * { vertical-align: top; }

#strokes span.big-slash { font-size: 300%; }

/* But don't change these ones */

#strokes .hide { display: none; }

#strokes table { display: inline-block; empty-cells: hide; }