body {
	background-color: #d5e7f0;
	font-family: Arial, sans-serif;
}

a {
	text-decoration: none;
}

h1 {
	font-size: 32px;
	text-align: center;
	margin: 15px 0;
}

h1 a {
	color: black;
}

main {
	max-width: 1024px;
	background-color: white;
	border-radius: 20px;
	padding: 30px;
	margin: auto;
}

h2 {
	font-size: 24px;
	margin: 0 0 30px;
}

h2.topics-header {
	margin-bottom: 15px;
}

ol {
	margin: 0;
}

li {
	margin-bottom: 10px;
}

section {
	margin-bottom: 60px;
}

section:last-child {
	margin-bottom: 0;
}

h3 {
	font-size: 16px;
	margin: 0 0 10px;
}

h3.example-header {
	margin-bottom: 20px;
}

.row {
	overflow: auto;
	margin-bottom: 10px;
}

.row:last-child {
	margin-bottom: 0;
}

.example-row {
	margin-bottom: 20px;
}

.example-row:last-child {
	margin-bottom: 0;
}

.row > a,
.row > .no-link {
	float: left;
	width: 180px;
	margin-top: 5px;
}

.example-row a {
	font-family: Courier;
	font-size: 24px;
	color: blue;
	cursor: pointer;
}

.sound {
	color: blue;
	cursor: pointer;
}

.sounds {
	float: left;
}

.sounds a {
	display: inline-block;
	font-family: Courier;
	font-size: 24px;
	font-weight: bold;
	color: blue;
	cursor: pointer;
	margin-right: 36px;
}

.sounds a:last-child {
	margin-right: 0;
}

.sound-pairs {
	display: inline-block;
	vertical-align: top;
}

.sound-pairs-note {
	color: green;
	margin-top: 10px;
	margin-bottom: 10px;
}

.sound-pairs-note.narrow {
	width: 380px;
}

.first-letter {
	text-decoration: underline;
}

.notes div {
	margin-bottom: 10px;
}

.notes div:last-child {
	margin-bottom: 0;
}

footer {
	text-align: center;
	margin: 15px 0;
}