span{
	font-family: sans-serif;
	color: #222222;
}

.resizeScreen{
	width: 100vw;
	height: 100vh;
}

.backgroundScreen{
	display: flex;
	background-color: #F0513A;
	align-items: center;
	flex-direction: column;
	justify-content:space-around;
}

.userSelectNone{
	user-select: none;
}

.title{
	display: flex;
	align-items: center;
	justify-content: center;
}

.titleName{
	width: 112vh;
}

.titleContentAllButton{
	flex-direction: column;
	align-items: center;
	height: 50vh;
	justify-content: space-evenly;
	position: relative;
	z-index: 2;
}

.titleContentButtons{
	margin-bottom: 10px;
	display: flex;
}

.titleContentGameButtons{
	justify-content: space-between;
}

.titleContentGameButtons2{
	justify-content: space-between;
	flex-direction: row;

	width: 45vh;
}

.titleContentOptionButtons{
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;

	position: absolute;
	z-index: 1;
	
	height: 30vh;
	width: 100%;
	bottom: 0;
	margin-bottom: 2vh;
}

.titleButtonPlay{
	height: 32vh;
	width: 35vh;
	margin-bottom: 7vh;
	animation: 1.5s scaleEaseBoutonPlay infinite;
}

@keyframes scaleEaseBoutonPlay{

	0% {transform: scale(1);}
	50%{transform: scale(1.1);}
	100% {transform: scale(1);}
}


.titleGameButton{
	height: 12vh;
	width: 19vh;
	animation: 4.5s scaleEaseGamePlay infinite;
}

@keyframes scaleEaseGamePlay{

	70%{transform: scale(1);}
	85%{transform: scale(1.03);}
	100% {transform: scale(1);}
}

.titleSoundContent{
	display: flex;
	flex-direction: row-reverse;
}

.titleOptionButton{
	height: 7vh;
	width: 7vh;

	margin: 1vh;
	margin-right: 20px;
}

.titleRange{
	width: 18vh;
}

.titleContentLocalization{
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
}

.titleContentFlags{
	display: flex;
	align-items: flex-end;
	flex-direction: row;
	justify-content: space-around;
}

.titleFlag{
	height: 6vh;
}

.helpCardContent{
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: solid;
	border-color: #333333;
    background-color: #D5E040;
    padding: 10px;
    position: relative;
}

.helpCardContentTuto{
	width: 107vh;
    height: 19vh;
}

.helpCardContentException{
	width: 122vh;
    height: 26vh;
}

.helpCardText{
	font-size: 5vh;
	text-align: center;
}

.helpCardTextException{
	font-size: 5vh;
	text-align: center;
}

.helpCardImg{
	height: 15vh;
	/*border: solid;*/
	border-color: #333333
}

.helpCardButton{
	width: 15vh;
	height: 12vh;
	margin-top: 10px; 
	top: 0;
}

.winLvlScreen{
	display: flex;

	flex-direction: column;
	align-items: center;
	justify-content: center;

	background-color: #F0513A;
}

.winLvlAllStatContent{
	display: flex;

	/*flex-direction: column;*/
	align-items: center;
	justify-content: center;
	width: 120vh;
    height: 41vh;
    border: solid;
	border-color: #333333;
	margin-top: 10px;

	background-color: #D5E040;
}

.winLvlReturnButton{
	max-height: 13vh;
    margin-top: 10px;	
}

.winLvlText{
	font-size: 5vh;
}
.winLvlTextScore{
	font-size: 5vmin;
	animation: 1.5s scaleEasewinLvlTextScore infinite;
}

@keyframes scaleEasewinLvlTextScore{

	0% {transform: scale(1);}
	50%{transform: scale(1.3);}
	100% {transform: scale(1);}
}

.winLvlStatContent{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
	justify-content: space-around;
}

.winLvlStarsContent{
	display: flex;
	flex-direction: row-reverse;
}

.winLvlStars{
	height: 30vmin;
	position: relative;
	z-index: 1;
}

.winLvlStars2{
	height: 34vmin;
	position: relative;
	z-index: 2;
}

.finalWinTitle{
	display: flex;

	flex-direction: column;
	align-items: center;
	justify-content: center;

	background-color: #F0513A;
}

.finalTitle{
	width: 110vh;
}

.finalAllstatsContent{
	display: flex;

	/*flex-direction: column;*/
	align-items: center;
	justify-content: center;
	width: 120vh;
    height: 41vh;
    border: solid;
	border-color: #333333;
	margin-top: 10px;
	padding: 10px;

	background-color: #D5E040;
}

.finalStatContent{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
	justify-content: space-around;
}

.finalStatText{
	font-size: 7vh;
}

.levelLine{
	display: flex;
	flex-direction:row;
	align-items: center;
	justify-content: center;
}

.levelUnlockAll{
	position: absolute;

	height: 10vmin;
	width: 10vmin;

	top: 0;
	right: 0;

	margin-top: 5px;
	margin-right: 5px;
}

.preLoadContent{
	display: flex;
	justify-content: space-evenly;
	flex-direction: column;
	align-items: center;

	height: 50vh;
}

.preLoadTitle{
	font-size: 18vh;
}

.preLoadBar{
	height: 4vh;
}

.preLoadEmptyBar{
	width: 70vh;
	background-color: yellow;
}

.preLoadFilledBar{
	transform-origin:left;
	-webkit-transform-origin:left;

	transform: scaleX(0);
	background-color: red;
}

.loginContent{
	display: flex;
	justify-content: space-evenly;
	flex-direction: column;
	align-items: center;

	height: 90vh;
}

.loginContentInput{
	display: flex;

	align-items: center;
	flex-direction: column;
}

.loginInput{
	font-size: 6vmin;
	width: 55vmin;

	text-align: center;
}

.loginButton{
	margin-top: 20px;
	height: 16vh;
	width: 30vh;
}

.hud{	
	z-index: 1;
	left: 0;
	top: 0;
	position: absolute;
	display: flex;

	justify-content: space-between;
}

.hudBigContents{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;


	width: calc((103vw - var(--sizelevel)) / 2);
	max-width: 400px;
}

.hudContents{
	display: flex;
	align-items: center;
	justify-content: space-around;

	flex-direction: column;	
}

.hudScoreContent{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	border: solid;
	border-color: #333333;
	padding: 5px;
    margin-left: 1vh;
    width: 13vw;
    height: 20vw;

	background-color: #D5E040
}

.hudButton{
	max-width: 250px;
	max-height: 250px;

	min-width: 50px;
	min-height: 50px;
}

.hudButtonGame{
	margin: 10px;
	width: 10vw;
	height: 10vw;
}

.hudButtonQuitRestart{
	margin: 5px;
	width: 7vw;
	height: 7vw;
}

.hudScore{
	height: 100%;
	width: 100%;
	text-align: center;
	font-size: 3vw;
}

.highscoreBackgroundScreen{
	display: flex;
	background-color: #F0513A;
	align-items: center;
	flex-direction: column;
	justify-content:center;
}

.top10BigContent{
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	width: 98vh;
	border: solid;
	border-color: #333333;
	background-color: #D5E040;
	padding: 10px;

	margin-bottom: 10px;
}

.highscoreContentTop10{
	display: flex;
	align-items:center;
	flex-direction: column;
	justify-content:space-around;
}

.highscoreContentLegend{
	display: flex;
	justify-content: center;
}

.playerContent{
	width: 30vmin;
}

.parContent{
	width: 15vmin;
}

.starsContent{
	width: 20vmin;
}

.scoreContent{
	width: 20vmin;
}

.textLegend{
	font-size: 6vh;
}

.textHighScore{
	font-size: 5vh;
}

.highScoreTextYourScore{
	font-size: 11vh;
	transform: scale(0);
	animation: 1.5s scaleEaseHighScoreTextYourScore infinite;
}

@keyframes scaleEaseHighScoreTextYourScore{

	0% {transform: scale(1);}
	50%{transform: scale(1.1);}
	100% {transform: scale(1);}
}

.highScoreImgButton{
	height: 9vh;
	width: 15vh;
}

.highScoreButton {
	position: absolute;
	left: 0;
	bottom: 0;
	margin-left: 15px;
}

.lvlSelectorCardButtonReturn{
	height: 12vh;
	width: 20vh;
}

.lvlSelectorTextButton {
    color: #333333;
    font-size: 10vh;
    position: absolute;
    cursor: pointer;
}

.lvlSelectorButtonContent{
	display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    cursor: pointer;
}

.levelContent{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.lvlSelectorButton {
    height: 18vh;
    width: 33vh;
}

.popUp {
    width: 44vh;
    height: 75vh;
    background-color: #D5E040;
    margin-left: 18px;
    margin-top: 18px;
    padding: 10px;

    border: solid;
    border-color: #333333;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}

.tutoCardImg{
	height: 10vh;
	z-index: 4;
}

.buttonPopUp{
	width: 5vh;
	height: 5vh;
	margin-bottom: 1vh;
	background-color: green;
}
.popUpText{
	font-size: 5.3vh;
	text-align: center;
}

.tutoCardContent{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 3;
	display: flex;
	justify-content: left;
	pointer-events: none;
}

@media (max-aspect-ratio: 15/12) {
	.hudBigContents{
		width: calc((124vw - var(--sizelevel)) / 2);
	}

	.titleRange {
		width: 13vh;
	}

	.titleName {
		width: 90vh;
	}

	.helpCardContentException {
   		width: 100vh;
    	height: 33vh;
	}

	.helpCardContentTuto {
	    width: 96vh;
	    height: 26vh;
	}

	.highScoreTextYourScore {
    	font-size: 8vh;
	}

	.winLvlAllStatContent{
		width: 113vh;
	}

	.finalAllstatsContent{
		width: 110vh;
	}
}

@media (orientation:portrait){
	.top10BigContent{
		width: 90vw;
	}

	.titleName{
		width: 80vw;
	}

	.titleContentAllButton{
		justify-content: flex-start;
		margin-bottom: 30vw;
	}

	.titleContentOptionButtons{
		justify-content: center;
		align-items: flex-end;
		flex-direction: row;
		bottom: 1vw;
		margin-bottom: auto;
	}

	.titleContentGameButtons2{
		width: 75vw;
	}

	.titleGameButton{
		height: 15vw;
		width: 30vw;
	}

	.titleOptionButton{
		height: 12vw;
		width: 12vw;
		margin-right: 1vh;
	}

	.titleSoundContent{
		flex-direction: column-reverse;
		width: 12vw
	}

	.titleButtonPlay{
    	height: 41vw;
    	width: 44vw;
   		margin-bottom: 9vw;
	}

	.titleRange{
		width: 18vw;
	}

	.titleContentLocalization{
		flex-direction: column-reverse;
		width: 15vw;
	}

	.titleFlag{
		height: 8vw;
	}

	.helpCardContentTuto{
		width: 90vw;
		height: 25vw;
	}

	.helpCardContentException{
		width: 90vw;
		height: 40vw;
	}

	.helpCardImg{
		height: 15vw;
	}

	.helpCardButton{
		bottom: 0;
		top:auto;

		margin-top: 0;
		margin-bottom: 10px;

		width: 15vw;
		height: 12vw;
	}

	.helpCardText{
		font-size: 5vw;
		text-align: center;
	}

	.helpCardTextException{
		font-size: 5vw;
		text-align: center;
	}

	.hud{
		flex-direction: column;
	}

	.hudBigContents {
		flex-direction: row;
		justify-content: space-around;
		width: 100%;
		height: calc((103vh - var(--sizelevel)) / 2);

		max-width: none;
		max-height: 300px;
	}

	.hudButton{
		width: 10vh;
		height: 10vh;
	}

	.hudScore{
		text-align: center;
		height: 100%;
		width: 100%;
		font-size: 3vh;
	}

	.hudScoreContent{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		border: solid;
		border-color: #333333;
		padding: 5px;
	    margin-left: none;
	    width: 20vh;
    	height: 11vh;
	    
		background-color: #D5E040
	}

	.hudContents.hudContentButtons{
		flex-direction: row;
	}

	.preLoadTitle{
		font-size: 18vw;
	}

	.preLoadBar{
		height: 4vw;
	}

	.preLoadEmptyBar{
		width: 70vw;
	}

	.loginButton{
		height: 16vw;
		width: 30vw;
	}

	.lvlSelectorCardButtonReturn{
		height: 11vw;
		width: 19vw;
	}

	.lvlSelectorButton {
    	height: 17vw;
    	width: 25vw;
	}

	.lvlSelectorTextButton {
    	color: #333333;
    	font-size: 7vw;
    	position: absolute;
    	cursor: pointer;
	}
	
	.levelContent {
    	display: flex;
    	flex-direction: column;
    	align-items: center;
    	justify-content: center;
    	margin-bottom: 105px;
	}

	.textLegend{
		font-size: 6vw;
	}

	.textHighScore{
		font-size: 5vw;
	}

	.highScoreImgButton{
		height: 10vw;
   		width: 17vw;
	}

	.highScoreTextYourScore{
		font-size: 8vw;
	}

	.popUp{
		width: 85vw;
    	height: 38vw;
    	background-color: #D5E040;
    	margin-top: 10px;
    	border: solid;
    	border-color: #333333;
	}

	.buttonPopUp{
		width: 7vw;
		height: 4vw;
		background-color: green;
		margin-bottom: 1vw;
	}

	.popUpText{
		font-size: 4.4vw;
		text-align: center;
	}

	.tutoCardImg{
		height: 10vw;
		z-index: 4;
	}

	.tutoCardContent{
		justify-content: center;
	}

	.popUp{
		width: 84vw; 
		height: 42vw;
		background-color: #D5E040;
		margin-top: 18px;
		border: solid;
		border-color: #333333;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
	}

	.winLvlScreen{
		display: flex;

		flex-direction: column;
		align-items: center;
		justify-content: center;

		background-color: #F0513A;
	}

	.winLvlAllStatContent{
		display: flex;

    	align-items: center;
    	justify-content: center;
    	width: 93vw;
    	height: 66vw;
    	border: solid;
    	border-color: #333333;
    	margin-top: 61px;
    	background-color: #D5E040;
	}

	.winLvlReturnButton{
		max-height: 13vw;
	    margin-top: 52px;	
	}

	.winLvlText{
		font-size: 5vw;
	}

	@keyframes scaleEasewinLvlTextScoreo{

		0% {transform: scale(1);}
		50%{transform: scale(1.08);}
		100% {transform: scale(1);}
	}

	.winLvlStatContent{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100%;
		justify-content: space-around;
	}

	.finalWinTitle{
		display: flex;

		flex-direction: column;
		align-items: center;
		justify-content: center;

		background-color: #F0513A;
	}

	.finalTitle{
		width: 85vw;
	}

	.finalAllstatsContent{
		display: flex;

	    align-items: center;
	    justify-content: center;
	    width: 70vw;
	    height: 65vw;
	    border: solid;
	    border-color: #333333;
	    margin-top: 10px;
	    padding: 10px;

	    background-color: #D5E040;
	}

	.finalStatContent{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100%;
		justify-content: space-around;
	}

	.finalStatText{
		font-size: 8vw;
	}

	.curtainScreen{
		position: absolute;
		width: 100vw;
		height: 50vh;
		top: auto;
	}

	.curtainLeft{
		top: 0;
		left: auto;

		transform-origin:top;
		-webkit-transform-origin:top;
	}

	.curtainRight{
		bottom: 0;
		right: auto;

		transform-origin:bottom;
		-webkit-transform-origin:bottom;
	}

	@media (min-aspect-ratio: 21/30) {
		.hudBigContents{
			height: calc((129vh - var(--sizelevel)) / 2);
		}

		.titleSoundContent{
			flex-direction: row;
		}

		.titleContentLocalization{
			flex-direction: row-reverse;
		}
	}
}

.topDiv {
	width: 91%;
}

.curtainScreen{
	position: absolute;

	z-index: 3;
	background-color: #130023;
}

.curtainsHorizontally{
	top: 0;

	width: 50vw;
	height: 100vh;
}

.curtainLeft{
	left: 0;

	transform-origin:left;
	-webkit-transform-origin:left;
}

.curtainRight{
	right: 0;

	transform-origin:right;
	-webkit-transform-origin:right;
}

.curtainsVercically{
	right: 0;

	width: 100vw;
	height: 50vh;
}

.curtainTop{
	top: 0;

	transform-origin:top;
	-webkit-transform-origin:top;
}

.curtainBottom{
	bottom: 0;

	transform-origin:bottom;
	-webkit-transform-origin:bottom;
}