body {
	margin: 0;
}

#container {
	height: 0;
	overflow: hidden;
	padding-top: 56.25%; /* 16:9 */
	background: white;
	position: relative;
}

/* Matrix Canvas */

.matrix {
	position: absolute;
	top: 0;
}


/* Scenes */

.scene {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	display: flex;
	justify-content: center;
	align-items: center;

	/* background-color: black; */
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;

	color: white;
}

.scene #title {
	display: flex;
}

/* TV Screen */

.screen {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	
	pointer-events: none;
}

.tv-darkness {
	background-image: url('../res/img/screen-darkness.png');
}

.tv-lines {
	background-image: url('../res/img/screen-lines.png');
}

.tv-frame {
	background-image: url('../res/img/screen-frame.png');
}

.tv-hub {
	background-image: url('../res/img/wheel_hub.png');
}

/* Other assets */

.object {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.title {
	background-image: url('../res/img/title.png');
	background-size: 60%;
}

.wheel {
	background-image: url('../res/img/wheel.png');
	/* background-size: 200%;
	background-position: center 0%; */
	transform: rotateZ(0deg) scale(2.5);
	top: 125%;

	/* transition: transform 8s ease-in-out; */

	-webkit-transition: all 8000ms cubic-bezier(0.435, 1, 1.000, 1); /* older webkit */
	-webkit-transition: all 8000ms cubic-bezier(0.435, 1.030, 1.000, 1.010);
	   -moz-transition: all 8000ms cubic-bezier(0.435, 1.030, 1.000, 1.010);
		 -o-transition: all 8000ms cubic-bezier(0.435, 1.030, 1.000, 1.010);
			transition: all 8000ms cubic-bezier(0.435, 1.030, 1.000, 1.010); /* custom */
	
	-webkit-transition-timing-function: cubic-bezier(0.435, 1, 1.000, 1); /* older webkit */
	-webkit-transition-timing-function: cubic-bezier(0.435, 1.030, 1.000, 1.010);
	   -moz-transition-timing-function: cubic-bezier(0.435, 1.030, 1.000, 1.010);
		 -o-transition-timing-function: cubic-bezier(0.435, 1.030, 1.000, 1.010);
			transition-timing-function: cubic-bezier(0.435, 1.030, 1.000, 1.010); /* custom */

	cursor: pointer;
}

.letterSpace {
	background-image: url('../res/img/letterspace.png');
}

/* Dialogs */
.dialog {
	position: absolute;
	top: 47%;
	left: 35.5%;
	transform: translate(-50%, -50%);

	width: 28.5%;
	height: 36.5%;

	background-image: url('../res/img/tutorUI_base.png');
	background-repeat: no-repeat;
	background-size: contain;

	display: none;
}

.dialog::after {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	content: '';

	background-repeat: no-repeat;
	background-size: contain;

	cursor: pointer;
}

.dialog#dialog-again::after {
	top: 40%;
	left: 9%;

	width: 82%;
	height: 100%;

	background-image: url('../res/img/tutorUI_again.png');
}

.dialog#dialog-spin::after {
	top: 40%;
	left: 9%;

	width: 82%;
	height: 100%;

	background-image: url('../res/img/tutorUI_spin.png');
}

.dialog#dialog-start::after {
	top: 40%;
	left: 9%;

	width: 82%;
	height: 100%;

	background-image: url('../res/img/tutorUI_start.png');
}

.dialog#dialog-correct::after {
	display: none;
}

#dialog-correct-yes {
	position: absolute;
	top: 40%;
	left: 9.5%;

	width: 39.5%;
	height: 50%;

	background-image: url('../res/img/tutorUI_correctYES.png');
	background-repeat: no-repeat;
	background-size: contain;

	cursor: pointer;
}

#dialog-correct-no {
	position: absolute;
	top: 40%;
	left: 49%;

	width: 40%;
	height: 50%;

	background-image: url('../res/img/tutorUI_correctNO.png');
	background-repeat: no-repeat;
	background-size: contain;

	cursor: pointer;
}

/* Game */
#game-word-container {
	position: absolute;
	top: 23%;
	height: 15%;
	width: 75%;

	display: flex;
	flex-direction: row;
	justify-content: center;
}

.game-word-letter-container {
	/* flex: 1; */
}

.game-word-letter {
	width: auto;
    height: 100%;

	background-image: url(../res/img/alphabetSpacesTutor.png);
	background-size: 600%;
	background-position: 0px 0px;

	--spacing: 20%;
}

.game-word-letter-selected {
	background-image: url(../res/img/alphabetSpaces.png);
}

.game-word-letter- { /* Space/Blank */
	background-position: calc(var(--spacing) * 2) calc(var(--spacing) * 0);
}

.game-word-letter-A {
	background-position: calc(var(--spacing) * 0) calc(var(--spacing) * 0);
}

.game-word-letter-B {
	background-position: calc(var(--spacing) * 1) calc(var(--spacing) * 0);
}

.game-word-letter-C {
	background-position: calc(var(--spacing) * 3) calc(var(--spacing) * 0);
}

.game-word-letter-D {
	background-position: calc(var(--spacing) * 4) calc(var(--spacing) * 0);
}

.game-word-letter-E {
	background-position: calc(var(--spacing) * 5) calc(var(--spacing) * 0);
}

.game-word-letter-F {
	background-position: calc(var(--spacing) * 0) calc(var(--spacing) * 1);
}

.game-word-letter-G {
	background-position: calc(var(--spacing) * 1) calc(var(--spacing) * 1);
}

.game-word-letter-H {
	background-position: calc(var(--spacing) * 2) calc(var(--spacing) * 1);
}

.game-word-letter-I {
	background-position: calc(var(--spacing) * 3) calc(var(--spacing) * 1);
}

.game-word-letter-J {
	background-position: calc(var(--spacing) * 4) calc(var(--spacing) * 1);
}

.game-word-letter-K {
	background-position: calc(var(--spacing) * 5) calc(var(--spacing) * 1);
}

.game-word-letter-L {
	background-position: calc(var(--spacing) * 0) calc(var(--spacing) * 2);
}

.game-word-letter-M {
	background-position: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
}

.game-word-letter-N {
	background-position: calc(var(--spacing) * 2) calc(var(--spacing) * 2);
}

.game-word-letter-O {
	background-position: calc(var(--spacing) * 3) calc(var(--spacing) * 2);
}

.game-word-letter-P {
	background-position: calc(var(--spacing) * 4) calc(var(--spacing) * 2);
}

.game-word-letter-Q {
	background-position: calc(var(--spacing) * 5) calc(var(--spacing) * 2);
}

.game-word-letter-R {
	background-position: calc(var(--spacing) * 0) calc(var(--spacing) * 3);
}

.game-word-letter-S {
	background-position: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
}

.game-word-letter-T {
	background-position: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
}

.game-word-letter-U {
	background-position: calc(var(--spacing) * 3) calc(var(--spacing) * 3);
}

.game-word-letter-V {
	background-position: calc(var(--spacing) * 4) calc(var(--spacing) * 3);
}

.game-word-letter-W {
	background-position: calc(var(--spacing) * 5) calc(var(--spacing) * 3);
}

.game-word-letter-X {
	background-position: calc(var(--spacing) * 0) calc(var(--spacing) * 4);
}

.game-word-letter-Y {
	background-position: calc(var(--spacing) * 1) calc(var(--spacing) * 4);
}

.game-word-letter-Z {
	background-position: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
}