*, ::before, ::after {
	box-sizing: border-box;
}

html {
	box-sizing: border-box;
	touch-action: manipulation;
	--btn-border: 0.2rem;
	--color-background: #91b7bf;
	--color-outside: #739ba4;
	--color-text: #1c0059;
	--color-gametext-future: #7070c6;
	--background-gametext-next: #dddd44;
	--color-gametext-done: #080875;
}

body {
	background-color: var(--color-outside);
	font-family: Arial, sans;
	font-size: 1.6rem;
	color: var(--color-text);
	margin: 0px 0px;
}

.better-button {
	font-size: 1em;
	text-decoration-style: dotted;
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
	user-select: none;
	-webkit-user-select: none;
	text-align: center;
	background-color: #a376d9;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.better-button-inactive {
	background-color: #736684;
	color: #3f3f4d;
}

html, body {
	height: 100%;
}

button {
	font-family: unset;
	font-size: 1em;
}

#column {
	width: 600px;
	min-height: 100%;
	margin: auto;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	--scale: 1.0;
	font-size: calc(1em*var(--scale));
	width: calc(600px*var(--scale));
}

.content {
	background-color: var(--color-background);
	padding: 3em 1em;
	border-radius: 0.3em;
}

#menu {
	padding-bottom: 33vh;
}

.menu-section {
	border-left: solid var(--color-outside) 3px;
	margin-left: 0.2em;
	padding-left: 0.4em;
}

.menu-row {
	display: flex;
}

.menu-row .menu-button {
	flex-basis: 50%;
	margin: 1em 0.5em;
}

.menu-button {
	margin: 1em 2em;
	padding: 0.4em;
}

.setting-label {
	margin: 0 1em 0 2em;
	font-weight: bold;
}

.menu-toggle {
	display: flex;
	align-items: center;
}

.menu-toggle input {
	height: 3em;
	width: 3em;
	margin: 0.5em 1em;
}

.setting-radio {
	display: flex;
	margin: 0.5em 0.2em 1.4em;
}

.setting-radio span {
	margin: 0 0.3em;
	padding: 0.2em 0;
	font-size: 1em;//1.6rem;
	text-decoration-style: dotted;
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
	user-select: none;
	-webkit-user-select: none;
	text-align: center;
	background-color: var(--color-outside);
	border-radius: 10px;
	flex-grow: 1;
}

.setting-radio span.selected {
	background-color: #5159d7;
}

.menu-spacer {
	margin: 0.5em 0;
}

#game {
	display: flex;
	flex-direction: column;
}

#game-controls {
	display: flex;
	align-items: center;
	margin: 1em 0;
}

.game-controls .better-button {
	padding: 0.5em 0.6em;
	font-size: 0.8em;
}

#button-quit {
	padding: 0.8em 2.4em;
}

#game-box {
	color: var(--color-gametext-future);
	font-kerning: none; /* Because the sample text is being split into multiple spans, kerning causes things to shift minutely as we advance the cursor. */
	position: relative;
	/*height: 7.7em;*/
	overflow: hidden;
	height: calc(var(--h)*var(--scale));
}

#game-box * {
  letter-spacing: 0.04em;
}

#game-box.character-mode * {
  letter-spacing: 0.2em;
}

#game-lines {
	position: relative;
}

.game-line {
	overflow-wrap: break-word;
	margin-bottom: 0.1em
}

.game-line span {
	white-space: pre-wrap; /* Prevent trimming white-space because these spans will sometimes start or end with a space and the -next element will sometimes be only a space. */
	letter-spacing: 0.05em;
	word-spacing: 0.1em;
}

.game-line-done {
	color: var(--color-gametext-done);
}

.game-line-next {
	position: relative;
}

.game-line-next-cursor {
	position: absolute;
	/*z-index: -1;*/
	width: 0.8em;
	top: 0;
	bottom: 0;
	/*background-color: var(--background-gametext-next);*/
}

#current-line .game-line-next-cursor {
	background-color: var(--background-gametext-next);
}

.game-line-next-label {
	opacity: var(--future-opacity);
	z-index: 1;
	position: relative;
}

.game-line-future {
	opacity: var(--future-opacity);
	z-index: 1; 
	position: relative;
}

.bad-character {
	background-color: red !important;
}

#challenge-display {
	position: relative;
	overflow: hidden;
	background-color: #ff5c4b;
	padding: 0.4em 0;
	margin-bottom: 1em;
	border-radius: 0.3em;
}

#challenge-bar {
	position: absolute;
	background-color: #324b55;
	left: 0;
	top: 0;
	padding: 0.4em 0;
	overflow: hidden;
}

.challenge-text {
	margin-left: 1em;
}

#challenge-bar .challenge-text {
	color: white;
	text-wrap: nowrap;
}

#results h3 {
	margin-left: 2em;
	margin-bottom: 0.5em;
}

#results div {
	margin-left: 4em;
}

#results-buttons {
	display: flex;
	margin: 0 0.5em !important;
}

#results-buttons span {
	flex-grow: 1;
	margin: 1em 0.5em;
}

#mobile-text-enabler {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	opacity: 0;
}

.hidden {
	display: none !important;
}

.invisible {
	visibility: hidden;
}

@keyframes wrong {
	0% {transform: translate(0em, 0em); }
	5% {transform: translate(1em, 0em); }
	15% {transform: translate(-0.9em, 0em); }
	25% {transform: translate(0.8em, 0em); }
	35% {transform: translate(-0.7em, 0em); }
	45% {transform: translate(0.6em, 0em); }
	55% {transform: translate(-0.5em, 0em); }
	65% {transform: translate(0.4em, 0em); }
	75% {transform: translate(-0.3em, 0em); }
	85% {transform: translate(0.2em, 0em); }
	95% {transform: translate(-0.1em, 0em); }
	100% {transform: translate(0em, 0em); }
}

@keyframes correct {
	0% {transform: translate(0em, 0em); }
	5% {transform: translate(0em, -2em); }
	15% {transform: translate(0em, 0em); }
	25% {transform: translate(0em, -1em); }
	35% {transform: translate(0em, 0em); }
	45% {transform: translate(0em, -0.5em); }
	55% {transform: translate(0em, 0em); }
	65% {transform: translate(0em, -0.25em); }
	75% {transform: translate(0em, 0em); }
	85% {transform: translate(0em, -0.125em); }
	95% {transform: translate(0em, 0em); }
	100% {transform: translate(0em, 0em); }
}

@media (max-width: 600px) {
	#column {
		justify-content: start;
	}
	
	.content {
		padding: 0 1em 3em;
	}
}