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

html,body {
	margin: 0;
	height: 100%;

	body {
		background-color: #000;
	}

	canvas {
		position: relative;
		z-index: 2;
	}
}

.night-feeling {
	background: darkblue; /* Old browsers */
	width: 100%;
	height: calc(100% - 20px);
	position: relative;
	overflow: hidden;
}


.character {
	position: absolute;
	display: inline-block;
	
	
	img {
		height: 100%;
		width: auto;
		max-width: 100%;
		display: block;
	}

	&.sith {
		bottom: 0;
		right: 0;
		z-index: 3;
		transform: translateX(100%);

		transition: all .5s linear;

		.front, .back {
			width: 100%;
			backface-visibility: hidden;
		}

		.back { 
			position: absolute;
			height: 100%;
			display: block;
			transform: rotateY(180deg);
			img{
				transform: scaleX(-1);
			}
		}
	}

	&.yoda {
		opacity: 0;
		transform: translateX(-100%) translateY(-100%);

		transition: all .5s linear;
	}
}

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

.scene1 {
	.sith {
		transform: translateX(-60%);
	}
}

.scene2 {
	.yoda {
		opacity: .5;
		transform: translateX(100%) translateY(0);
		top: auto;
		bottom: 0;
		left: 5%;
	}
}

.scene3 {
	.sith {
		transform-style: preserve-3d;
		animation: miffed-sith 2s 1 forwards;

		.back {
			top: 0;
		}
	}
}

.scene4 {
	.yoda {
		opacity: 0;
	}
}

@keyframes miffed-sith {
	0% {
		transform: translateX(-60%) translateY(0);
	}
	25% {
		transform: translateX(-60%) translateY(-10%);
	}
	50% {
		transform: translateX(-60%) translateY(-10%) rotateY(0);
	}
	75% {
		transform: translateX(-60%) translateY(0) rotateY(180deg);
	}
	100% {
		transform: translateX(100%) rotateY(180deg);
	}

}