styles.scss
@import url('toolbar.scss');

/* open-sans-regular - latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/open-sans-v40-latin-regular.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-500 - latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 500;
	src: url('fonts/open-sans-v40-cyrillic_greek_latin_latin-ext-500.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html,
textarea {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	background-color: #000;
	color: #fff;
}

div#prompter {
	&.reset-flash {
		background-color: #fff;
	}

	&.speech-error {
		background-color: #f00;
	}

	&.speech-ended {
		// background-color: #909;
	}

	transition: background-color 0.5s ease,
	transform 0.5s;

	&.hflip {
		transform: rotateY(180deg);
	}

	&.vflip {
		transform: rotateX(180deg);
	}

	position: fixed;
	top: 54px;
	left: 6px;
	right:6px;
	bottom: 6px;
	padding: 4px;

	div#script-status,
	div#speech-status {
		position: absolute;
		left: 0;
		right: 0;
		height: 16px;
		padding: 4px;
		background-color: #000;
		color: #fff;
		font-size: 10px;
		font-family: monospace;
	}

	div#script-status {
		bottom: 16px;
	}

	div#speech-status {
		bottom: 0;
	}

	textarea,
	div#playback {

		font-size: 48px;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 32px;
		/* padding: 1000px 200px; */
		line-height: 1.8em;
		overflow-y: scroll;

		span.matched {
			// what colour is the text we've already definitely matched?
			color: #ff0;
		}

		span.guessed {
			// what colour is the text we've guessed because we detected speech but haven't matched it yet?
			color: #ff9;
		}

		span.lookahead {
			// What colour is the text we're considering when trying to find a match?
			color: #fff;
		}

		span.remainder {
			// What colour is the text we're not looking at yet?
			color: #fff;
		}
	}

	textarea {
		display: block;
	}

	div#playback {
		display: none;
	}

	hr {
		position: absolute;
		border-width: 0 0 4px 0;
		border-style: solid;
		border-color: #f00;
		left: 200px;
		right: 200px;
		top: 200px;
		padding-top: 10px;
	}
}