* {
 	box-sizing: border-box;
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
 }

 @font-face {
 	font-family: NumerHIC;
 	src: url('../../nav/fonts/numerhic.otf');
 }

 .appBar {z-index: 1;position: absolute; background-color: transparent;}
 canvas {
 	position: absolute;
 	top: 0
 }

 #btnRules {
 	display: block
 }

 #loyal {
 	position: absolute;
 	bottom: 0dvh;
 	right: 0;
 	max-width: 500px;
 	height: 500px;
 	max-height: 40vh;
 	pointer-events: none;
 	z-index: 1;
 	aspect-ratio: 1;
 }

 #controls {
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
 	font-family: NumerHIC;
 	font-size: 1.5em;
 	/*width: 100vw;*/
 	height: min(45vh, 200px);
 	position: absolute;
 	z-index: 0;
 	bottom: 10%;
 	background-image: linear-gradient(top, #edecec, #cecbc9);
 	background: #9E5744;
 	/*transform:
 		perspective(950px) translate3d(0px, 0px, -50px) rotateX(27deg);*/
 	border-radius: 20px;
 	box-shadow: 0 70px 40px -20px rgba(0, 0, 0, 0.2);
 	/*transition: 0.4s ease-in-out transform;*/

 	box-shadow:
 		0px 3px rgba(128, 128, 128, 1),
 		/* gradient effects */
 		0px 4px rgba(118, 118, 118, 1),
 		0px 5px rgba(108, 108, 108, 1),
 		0px 6px rgba(98, 98, 98, 1),
 		0px 7px rgba(88, 88, 88, 1),
 		0px 4px rgba(78, 78, 78, 1),
 		/*0px 14px 6px -1px rgba(128,128,128,1); /* shadow */
 		0px 7px 6px -1px rgba(128, 128, 128, 1);
 	/* shadow */
 }

 .lumiere {
 	max-width: 25px;
 	width: 5vw;
 	min-width: 10px
 }

 .group {
 	color: white;
 	border: solid inset;
 	border-radius: 10px;
 	padding: 10px;
 	margin: 1vw;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	flex-direction: column;
 	background: #aa5f4a;
 	box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.75) inset;
 	-webkit-box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.75) inset;
 	-moz-box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.75) inset;
 }

 .group .col {
 	display: flex;
 	flex-wrap: wrap;
 }

 .group .col img.note {
 	height: 30px
 }

 hr {
 	width: 100%;
 	border-top: solid 1px rgb(111, 37, 37);
 }

 @media only screen and (orientation: portrait) {
 	#loyal {
 		display: none;
 	}

 	#controls {
 		flex-wrap: wrap;
 		height: min(45vh, 300px);
 		align-items: center;
 	}

 	.switchBtn.lightManege,
 	.switchBtn.spot {
 		height: 20px;
 		width: 60px
 	}

 	.switchBtn.spot span {
 		width: 20px;
 		height: 15px;
 	}
 }

 @media only screen and (orientation: portrait) and (max-width:600px) {
 	#controls {
 		flex-wrap: wrap;
 		//height: min(40vh, 400px)
 	}

 	.col.moving {
 		flex-direction: column;
 	}

 	.switchBtn.lightManege,
 	.switchBtn.spot {
 		height: 20px;
 		width: 60px
 	}

 	.switchBtn.spot span {
 		width: 20px;
 		height: 15px;
 		font-size: 1.2em;

 	}

 	.switchBtn.spot label i:before {
 		font-size: 6px;

 	}

 	.switchBtn.lightManege label i:before {
 		font-size: 10px;
 	}


 	//.lumiere { width:}
 	.container {
 		width: 120px;
 		height: 120px
 	}

 	.de {
 		width: 120px;
 		height: 120px;
 	}

 	.den {
 		width: 120px;
 		height: 120px;
 		margin: -60px 0 0 -60px;
 	}

 	.dene {
 		width: 60px;
 		height: 60px;
 		margin: -30px 0 0 -30px;
 	}

 	.denem {
 		width: 60px;
 		height: 60px;
 		margin: -30px 0 0 -30px;
 	}

 	.deneme {
 		width: 60px;
 		height: 60px;
 		margin: -30px 0 0 -30px;
 	}

 }

 @media only screen and (orientation: landscape) and (max-height:500px) {

 	#loyal {
 		display: none;
 	}

 	#controls {
 		bottom: 0
 	}

 	.switchBtn.lightManege,
 	.switchBtn.spot {
 		height: 20px;
 		width: 70px;
 	}

 	.switchBtn.spot span {
 		width: 20px;
 		height: 15px;
 	}

 	.button span img {
 		max-width: 20px
 	}
 }

 @media only screen and (orientation: landscape) and (max-width:1500px) {

 	#loyal {
 		display: none;
 	}
 }

 #rules {
 	text-align: center;
 }

 

 #rules h4,
 #rules p {
 	text-align: left;
	margin-bottom: 20px;
 }

 p.remarque {
 	font-size: small;
	margin-top: 50px;
 }