@font-face {
	font-family: 'entypo';
	src: url('../fonts/entypo.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
html {
	font-size: 62.5%;
}
body {
	font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
	font-size: 1.6rem;
	line-height: 1.5;
	overflow: hidden;
}
.main {
	max-width: 50em;
	margin: auto;
	padding: 3em 1em 2em;
	overflow: auto;
	height: 100vh;
	width: 100vm;
	box-sizing: border-box;
	position: relative;
	overflow-x: hidden;
}
.content {
	left: 1em;
	right: 1em;
	top: 4em;
	height: calc(100% - 9em);
	box-sizing: border-box;
	position: absolute;
}
.actions {
	position: fixed;
	bottom: 0;
	left: 0;
	height: 4em;
	width: 100%;
	z-index: 100;
	overflow: hidden;
	box-sizing: border-box;
}
.actions div {
	width: 50%;
	height: 100%;
	float: left;
	text-align: center;
	visibility: hidden;
	position: relative;
	overflow: hidden;
}
.actions .speak {
	width: 0;
}
body.speech-on .actions div {
	width: 40%;
}
body.speech-on .actions .speak {
	width: 20%;
}
.actions div:after {
	visibility: visible;
	line-height: .8;
	font-family: 'entypo';
	font-size: 5em;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.actions .unknown:after {
	line-height: .9;
	content: '\1F44E';
}
.actions .known:after {
	content: '\1F44D';
}
.actions .speak:after {
	font-size: 6em;
	content: "\25B6";
	line-height: .7;
}
.actions .playing.speak:after {
	content: "\25A0";
}

.hud {
	text-align: center;
	font-size: 2rem;
	line-height: 2;
	height: 2em;
	position: fixed;
	top: 0;
	width: 100%;
	left: 50%;
	margin-left: -50%;
	box-sizing: border-box;
	z-index: 100;
}
.phrase {
	display: none;
	transition: -webkit-transform 0.3s linear;
	transition: transform 0.3s linear;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: auto;
	z-index: 10;
}
.phrase.current, .phrase.done, .phrase.next {
	display: block;
}
.phrase.next {
	-webkit-transform: translate(0, -200%);
	transform: translate(0, -200%);
}
.phrase.unknown {
	-webkit-transform: translate(-150%, 0);
	transform: translate(-150%, 0);
}
.phrase.known {
	-webkit-transform: translate(150%, 0);
	transform: translate(150%, 0);
}
.phrase .target {
	margin-bottom: 3vw;
}
.phrase .source {
	opacity: 0;
	transition: opacity .2s linear;
}
.phrase.selected .source {
	opacity: 1;
}