:root {
	--time-animation-sprite-player: 0.1s;

	--sizelevel: 95vmin;
	--sizeCase: calc(100% / 9);
}

body{
	margin: 0;
	padding: 0;
}

.first{
	clear: both;
}

.case{
	background-size: 341% auto;
	background-repeat: no-repeat;

	border: solid #333333 0.1vmin;

	height: var(--sizeCase);
	width: var(--sizeCase);

	float: left;

	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.goal{
	background-position: 43% 18%;
}

.floor{
	background-position: 0 17.5%;
}

.floorExterior{
	background-position: 0 0;
}

.spawner{
	background-position: 0 0;
}

.spawnerAnimation{
	animation: spawner-anim 0.5s steps(1);
}

@keyframes spawner-anim{
	0%{
		background-position: 0 0;
	}

	11%{
		background-position: 42% 0;
	}

	22%{
		background-position: calc(42% * 2) 0;
	}

	33%{
		background-position: 0 17.5%;
	}

	44%{
		background-position: 42% 17.5%;
	}

	55%{
		background-position:  calc(42% * 2) 17.5%;
	}

	66%{
		background-position: 0 calc(17.3% * 2);
	}

	77%{
		background-position: 42% calc(17.3% * 2);
	}

	88%{
		background-position:  calc(42% * 2) calc(17.3% * 2);
	}

	100%{
		background-position: 0 0;
	}
}

.size{	
	background-size: 341% auto;
	background-repeat: no-repeat;
	position: absolute;
	height: var(--sizeCase);
	width: var(--sizeCase);
}

.z-indexActor{
	z-index: 1;
}

.wall{
	background-position: 42% 17.3%;
}

.normalBox{
	background-position: 0 0;
}

.onGoal{
	background-position: 41% 0;
}

.explosionBox{
	animation: explosion 0.25s steps(1);
	z-index: 2;
}

@keyframes explosion{
	0%{
		background-position: 0 0;
	}

	20%{
		background-position: 41.5% 0;
	}

	40%{
		background-position: calc(41.5% * 2) 0;
	}

	60%{
		background-position: 0 17.5%;
	}

	80%{
		background-position: 41.5% 17.5%;
	}

	100%{
		background-position: calc(41.5% * 2) 17.5%;
	}
}

.idleRight{
	background-position: 0 0;
}

.idleDown{
	background-position: calc(41.5% * 2) 0;
}

.idleUp{
	background-position: calc(41.5% * 2) 17.5%;
}

.idleLeft{
	background-position: 0 calc(17.2% * 3);
}

.walkRight{
	--pos-y-sprite-player-animation: 0;

	animation: playerMove var(--time-animation-sprite-player) steps(2) infinite;
}

.walkDown{
	--pos-y-sprite-player-animation: 17.2%;

	animation: playerMove var(--time-animation-sprite-player) steps(2) infinite;
}

.walkUp{
	--pos-y-sprite-player-animation: calc(17.2% * 2);

	animation: playerMove var(--time-animation-sprite-player) steps(2) infinite;
}

.walkLeft{
	animation: playerMoveLeft var(--time-animation-sprite-player) steps(2) infinite;
}

@keyframes playerMove{
	0%{
		background-position: 0 var(--pos-y-sprite-player-animation);
	}

	100%{
		background-position: calc(41.5% * 2) var(--pos-y-sprite-player-animation);
	}
}

@keyframes playerMoveLeft{
	0%{
		background-position: 0 calc(17.2% * 3);
	}

	/*-4 et -1 pour avoir la position symétrique avec le 0% 
	et de centre la position qu'on veut afficher*/
	100%{
		background-position: calc(41.5% * 4) 17.2%;
	}
}

.gameContainer{
	background-color: #F0513A;
	width: 100vw;
	height: 100vh;

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

.displayNone{
	display: none;
}

.level{
	position: relative;
	z-index: 2;
	background-color: #659F3E;
	width: var(--sizelevel);
	height: var(--sizelevel);
}

.contentSafe{
	width: 100vw;
	height: 100vh;

	position: absolute;
	left: 0px;
	top: 0px;
	
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 3;
}

.safeZone{
	width: 100vw;
	height: calc(100vw * 2/3);

	border: solid black 10px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

@media (orientation:portrait) {
	@media (min-aspect-ratio: 2/3) {
		.level{
			--sizelevel: 85vmin
		}
	}

	@media (min-aspect-ratio: 21/30) {
		.level{
			--sizelevel: 70vmin
		}
	}
}

@media (orientation:landscape) {
	@media (max-aspect-ratio: 3/2) {
		.safeZone{
			width: calc(100vh * 3/2);
			height: 100vh;
		}

		.level{
			--sizelevel: 90vmin;
		}
	}

	@media (max-aspect-ratio: 15/12) {
		.level{
			--sizelevel: 70vmin;
		}
	}
}

.buttonCursor{
	cursor: pointer;
}

.flash{
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;

	background-color: #97928E;
	pointer-events: none;
}