.hidden, .on-print { display: none; }

:root
{
	--done-pct: 0%;
	--zoom: 1.0;
}

* { box-sizing: border-box; }

html
{
	font-family: Arial, sans-serif;
	/* scroll-behavior: smooth; */
}

body
{
	color: #333;
	background: #e9e9e9;
	overflow-y: scroll;
	overflow-x: hidden;
	margin: 0;
	zoom: var(--zoom);
}

.page
{
	position: relative;
	text-align: left;
	padding: 35px 40px;
	margin: 20px auto;
	max-width: 1040px;
	border-radius: 10px;
	box-shadow: 0 0 25px rgba(0,0,0,0.04);
	background: #fff;
}

@media (max-width: 1079px)
{
	body
	{
		background: #fff;
	}

	.page
	{
		padding: 20px;
		margin: 0 auto;
		max-width: 1000px;
		border-radius: 0;
		box-shadow: none;
	}
}

@media (max-width: 499px)
{
	.page { padding: 10px 10px 20px 10px; }
}

@media (max-width: 349px)
{
	:root
	{
		--zoom: 0.75;
	}
}

a { color: #999; cursor: pointer; }
a:hover { color: #1caff6; }
a:hover, a:active { outline: 0; }
.page a { color: #1caff6; }

.page p
{ 
	margin: 20px 0;
}

h1, h2
{
	font-size: 1em;
	background: #1caff6;
	color: #fff;
	border-radius: 8px;
	position: relative;
	line-height: 32px;
	padding: 0 5px;
	margin: 20px 0 0 0;
}

h1
{
	background: linear-gradient(90deg, #66bb5e 0%, #66bb5e var(--done-pct), #1caff6 var(--done-pct), #1caff6 100%);
	text-align: center;
	font-size: 1.17em;
}

h2.checked
{
	background: #66bb5e;
}

h2 a.title
{
	color: inherit;
	text-decoration: inherit;
}

h2 span
{
	opacity: 0.5;
	font-size: 70%;
	line-height: 32px;
	float: right;
	padding-right: 5px;
}

.page > section:first-child > h1:first-child { margin-top: 0; }

h2
{
	position: sticky;
	top: 15px;
	scroll-margin-top: 15px;
	box-shadow: -10px -15px #fff, 10px -15px #fff;
}

.page > section::after
{
	content: '';
	display: block;
	overflow: hidden;
	height: 0px;
	margin: -10px 0 -5px 0;
}

@media (max-width: 499px)
{
	h2
	{
		top: 10px;
		scroll-margin-top: 10px;
		box-shadow: -10px -10px #fff, 10px -10px #fff;
	}

	.page > section::after
	{
		margin: -10px 0;
	}
}

h3
{
	font-size: 1.17em;
	font-weight: bold;
	margin: 20px 0;
}

hr { margin: 20px 0; clear: both; border: none; border-bottom: 1px solid rgba(0,0,0,0.1); }
hr+hr { margin-top: -18px; }

/* Horizontally scrollable tables. */

div.sx
{
	overflow-x: auto;
	margin: 20px 0;
}

table
{
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	border: 2px solid #ddd;
}

th, td
{
	padding: 5px 7px;
}

th
{
	text-align: left;
	background: #eee;
	border-bottom: 2px solid #ddd;
}

tr:nth-child(2n+1) { background: #f7f7f7; }

th[align=left],   td[align=left]   { text-align: left; }
th[align=center], td[align=center] { text-align: center; }
th[align=right],  td[align=right]  { text-align: right; }

@media (max-width: 749px)
{
	table { font-size: 12px; }
}

/* Checkbox in skill headers. */

h2 a.check
{
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18px' height='18px' viewBox='0 0 36 36'%3E%3Cpath fill='%23FFF' d='M29.28 6.362a2.502 2.502 0 0 0-3.458.736L14.936 23.877l-5.029-4.65a2.5 2.5 0 1 0-3.394 3.671l7.209 6.666c.48.445 1.09.665 1.696.665c.673 0 1.534-.282 2.099-1.139c.332-.506 12.5-19.27 12.5-19.27a2.5 2.5 0 0 0-.737-3.458z'%3E%3C/path%3E%3C/svg%3E") center center no-repeat;
	display: inline-block;
	float: right;
	width: 20px;
	height: 20px;
	margin: 6px 2px 0 0;
	background-color: #a3a3a3;
	border-radius: 6px;
	border: 1px solid white;
}

h2.checked a.check
{
	background-color: transparent;
	border-color: transparent;
}

/* How-to-use pulse animation for the checkbox. */

.pulse::before
{
	content: '';
	position: relative;
	display: block;
	width: 300%;
	height: 300%;
	box-sizing: border-box;
	margin-left: -100%;
	margin-top: -100%;
	border-radius: 45px;
	background-color: #01a4e9;
	animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring
{
	0% { transform: scale(.33); }
	80%, 100% { opacity: 0; }
}

/* Scrolling button. */

#btn-scroll-to
{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Ccircle r='12' fill='%23aab1b7' cx='12' cy='12'/%3E%3Cpolygon points='12,7 7,15 17,15' fill='%23ffffff'/%3E%3C/svg%3E");
	width: 32px;
	height: 32px;
	z-index: 10;
	position: fixed;
	display: block;
	right: 20px;
	bottom: 20px;
	pointer-events: none;
	transition: opacity 0.2s ease-in-out, rotate 0.2s ease-in-out;
	opacity: 0;
	-webkit-tap-highlight-color: transparent;
}

#btn-scroll-to.back-to-top
{
	pointer-events: auto;
	opacity: 0.6;
}

#btn-scroll-to.back-to-now
{
	pointer-events: auto;
	opacity: 0.6;
	rotate: 60deg;
}

/* Table of Contents. */

.toc
{
	column-count: 3;
	column-gap: 0;
	padding: 0;
	list-style: none;
	padding: 0;
	margin: 20px 0;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
	color: #a3a3a3;
}

.toc a.checked
{
	color: #66bb5e;
}

.toc li.title
{
	overflow: hidden;
	font-weight: bold;
	margin: 16px 12px;
	column-span: all;
}

.toc li.title:first-child
{
	margin-top: 0;
}

.toc li.title::before, .toc li.title::after
{
	content: "";
	display: inline-block;
	position: relative;
	vertical-align: middle;
	width: 50%;
	height: 1px;
	background-color: rgba(0,0,0,0.1);
	/* border: 1px solid rgba(0,0,0,0.1); */
	/* border-width: 1px 0 1px 0; */
	margin-top: -3px;
}

.toc li.title::before
{
	right: 0.5em;
	margin-left: -50%;
}

.toc li.title::after
{
	left: 0.5em;
	margin-right: -50%;
}

/* Happy owl in the footer. */

#end
{
	background: #e9e9e9;
	width: 100%;
	height: calc(100vh + 1px); /* for IE11 */
	height: calc(100vh / var(--zoom) + 1px);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.happy-owl
{
	background: url(images/owl-standard.svg) center center / 300px no-repeat;
	height: 300px;
	width: 300px;
}

.happy-owl::after
{
	/* Preload the happy owl. */
	width: 0; height: 0; overflow: hidden; display: block;
	content: url(images/owl-happy.svg);
}

.happy-owl:hover
{
	/* Show the happy owl on hover. */
	background-image: url(images/owl-happy.svg);
}

.happy-owl.trophy, .happy-owl.trophy:hover
{
	background: url(images/owl-trophy-fi.svg) center center / 230px no-repeat;
}

footer
{
	text-align: center;
	color: #a3a3a3;
	font-size: 12px;
	height: 72px;
	margin-top: -72px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

/* Speaking buttons. */

span.speak
{
	white-space: nowrap;
}

span.speak::before
{
	content: "";
	display: inline-block;
	background: #1caff6 url(images/icon-speak.svg) center center / 10px no-repeat;
	border-radius: 50%;
	height: 16px;
	width: 16px;
	margin: -4px 0.2em -3px 0;
}

@media (max-width: 749px)
{
	span.speak::before
	{
		margin: -4px 0.2em -4px 0;
	}
}

span.speak.disabled::before
{
	opacity: 0.2;
}

span.speak:not(.disabled):hover
{
	cursor: pointer;
}

span.speak:not(.disabled):not(.playing):hover::before,
span.speak:not(.disabled):not(.playing):active::before
{
	opacity: 0.8;
}

span.speak.error::before
{
	background-color: #f37b67;
}

span.speak.playing::before
{
	background-color: #66bb5e;
}

/* Skill header icons. */

.skill::before
{
	content: '';
	display: inline-block;
	background: rgba(0,0,0,0.3) url(images/skill-icons.svg) 22px 22px no-repeat;
	background-size: 200px;
	height: 22px; width: 22px;
	border-radius: 50%;
	vertical-align: middle;
	margin: 1px 5px 4px 1px;
}

.skill.big-icon::before { transform: scale(2); margin-right: 20px; }
.skill.no-icon::before { display: none; }

.skill.icon-egg::before                 { background-position:    1px    1px; }
.skill.icon-chicken::before             { background-position:  -19px    1px; }
.skill.icon-burger::before              { background-position:  -39px    1px; }
.skill.icon-brush::before               { background-position:  -59px    1px; } /*-*/
.skill.icon-runner-yellow::before       { background-position:  -79px    1px; } /*-*/
.skill.icon-whale::before               { background-position:  -99px    1px; }
.skill.icon-chemistry::before           { background-position: -119px    1px; } /*-*/
.skill.icon-gold::before                { background-position: -139px    1px; } /*-*/
.skill.icon-football::before            { background-position: -159px    1px; }
.skill.icon-stethoscope::before         { background-position: -179px    1px; } /*-*/
.skill.icon-architecture::before        { background-position:    1px  -19px; } /*-*/
.skill.icon-map::before                 { background-position:  -19px  -19px; }
.skill.icon-tape-measure::before        { background-position:  -39px  -19px; }
.skill.icon-sun-planet::before          { background-position:  -59px  -19px; } /*-*/
.skill.icon-tree::before                { background-position:  -79px  -19px; } /*-*/
.skill.icon-bulb-off::before            { background-position:  -99px  -19px; } /*-*/
.skill.icon-pillar::before              { background-position: -119px  -19px; } /*-*/
.skill.icon-compass::before             { background-position: -139px  -19px; }
.skill.icon-flag::before                { background-position: -159px  -19px; } /*-*/
.skill.icon-magnet::before              { background-position: -179px  -19px; } /*-*/
.skill.icon-log::before                 { background-position:    1px  -39px; } /*-*/
.skill.icon-counting::before            { background-position:  -19px  -39px; } /*-*/
.skill.icon-diploma::before             { background-position:  -39px  -39px; } /*-*/
.skill.icon-phrases::before             { background-position:  -59px  -39px; }
.skill.icon-ghost::before               { background-position:  -79px  -39px; } /*-*/
.skill.icon-sock::before                { background-position:  -99px  -39px; } /*-*/
.skill.icon-clock::before               { background-position: -119px  -39px; }
.skill.icon-toilet::before              { background-position: -139px  -39px; }
.skill.icon-baby-bottle::before         { background-position: -159px  -39px; }
.skill.icon-phone::before               { background-position: -179px  -39px; }
.skill.icon-handshake::before           { background-position:    1px  -59px; }
.skill.icon-rocket::before              { background-position:  -19px  -59px; }
.skill.icon-heart::before               { background-position:  -39px  -59px; }
.skill.icon-suit::before                { background-position:  -59px  -59px; }
.skill.icon-talk::before                { background-position:  -79px  -59px; } /*-*/
.skill.icon-plane::before               { background-position:  -99px  -59px; } /*-*/
.skill.icon-skull::before               { background-position: -119px  -59px; } /*-*/
.skill.icon-patch::before               { background-position: -139px  -59px; } /*-*/
.skill.icon-mountain::before            { background-position: -159px  -59px; }
.skill.icon-gear::before                { background-position: -179px  -59px; } /*-*/
.skill.icon-box::before                 { background-position:    1px  -79px; } /*-*/
.skill.icon-thumb::before               { background-position:  -19px  -79px; } /*-*/
.skill.icon-bee::before                 { background-position:  -39px  -79px; }
.skill.icon-directions::before          { background-position:  -59px  -79px; } /*-*/
.skill.icon-crown::before               { background-position:  -79px  -79px; } /*-*/
.skill.icon-chameleon::before           { background-position:  -99px  -79px; }
.skill.icon-chat::before                { background-position: -119px  -79px; }
.skill.icon-mouth::before               { background-position: -139px  -79px; } /*-*/
.skill.icon-rain::before                { background-position: -159px  -79px; } /*-*/
.skill.icon-glasses::before             { background-position: -179px  -79px; }
.skill.icon-runner-white::before        { background-position:    1px  -99px; }
.skill.icon-runner-blue::before         { background-position:  -19px  -99px; } /*-*/
.skill.icon-thoughts::before            { background-position:  -59px  -99px; } /*-*/
.skill.icon-lips::before                { background-position:  -79px  -99px; } /*-*/
.skill.icon-santa::before               { background-position:  -99px  -99px; } /*-*/
.skill.icon-chinese-lights::before      { background-position: -119px  -99px; } /*-*/