@font-face {
	font-family: 'Special';
	src: url('../css/special.ttf');
	}
	@font-face {
	font-family: 'AffogatoB';
	src: url('../css/Affogato-Black.ttf');
	}
	@font-face {
	font-family: 'AffogatoR';
	src: url('../css/Affogato-Regular.ttf');
	}

span.frac {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	}
span.frac > sup, span.frac > sub {
	display: block;
	font: inherit;
	padding: 0 0.3em;
	}
span.frac > sup {border-bottom: 0.08em solid;}
span.frac > span {display: none;}

.config{
	background-color: #9b2590;
	width:45%;
	min-height: 100vh;
	font-family: "AffogatoR", sans-serif;
	color: rgb(255, 255, 255);
	vertical-align: top;
}

.apercu{
	background-color: #e4cceb;
	width:55%;
	min-height: 100vh;
	font-family: "AffogatoR", sans-serif;
	color: #8f0ab0;
	vertical-align: top;
}

.play {
	background-color:#8f0ab0;
	border-radius:22px;	
	cursor:pointer;
	color:#ffffff;
	font-size:15px;
	padding:8px 8px;	
	
}
.play:hover {
	background-color:#e0092d;
}

.param_g{
	color:black;
	background-color: #e4cceb;
	-webkit-box-shadow: 6px 5px 11px -3px #000000; 
	box-shadow: 6px 5px 11px -3px #000000;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	width:90%;
	padding: 1%;
	margin: 1%;

}

table.roundedCorners { 
	border: 1px solid #8f0ab0;
	border-radius: 10px; 
	border-spacing: 2px;
	width:90%;
	margin:5%;
	background-color: #ffffff;

	}
table.roundedCorners td, 
table.roundedCorners th { 
	border-bottom: 1px solid #8f0ab0;	
	padding: 10px; 
	background-color: #ffffff;
	}

td.first, th.first {
	border-right: 1px solid #8f0ab0;
	background-color: #ffffff;
}

table.roundedCorners tr:last-child > td {
	border-bottom: none;
	background-color: #ffffff;
}

.menu {
	background-color: #9b2590;
	float : left;
	width: 350px;	
	z-index: 10000;
	height: 1000px;
	overflow: auto;
	-moz-user-select: none; /* Firefox */
	-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
	-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
	user-select: none; /* Propriété standard */	
}


.popup {           
    z-index: 1000;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	/* width: 200px;  */
	position:absolute;	
	padding: 5px;
	overflow: hidden;
	border: none;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font: normal 20px/1 "Bangers", Times, serif;
	color: rgba(255,255,255,1);
	text-align: left;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	background: -webkit-linear-gradient(-14.42077312751097deg, rgba(59,103,158,1) 0, rgba(32,124,202,1) 19%, rgba(43,136,217,1) 55%, rgba(125,185,232,1) 86%, rgba(125,185,232,1) 100%);
	background: -moz-linear-gradient(104.42077312751097deg, rgba(59,103,158,1) 0, rgba(32,124,202,1) 19%, rgba(43,136,217,1) 55%, rgba(125,185,232,1) 86%, rgba(125,185,232,1) 100%);
	background: linear-gradient(104.42077312751097deg, rgba(59,103,158,1) 0, rgba(32,124,202,1) 19%, rgba(43,136,217,1) 55%, rgba(125,185,232,1) 86%, rgba(125,185,232,1) 100%);
	background-position: 50% 50%;
	-webkit-background-origin: padding-box;
	background-origin: padding-box;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-background-size: auto auto;
	background-size: auto auto;
	-webkit-box-shadow: 4px 5px 4px 2px rgba(0,0,0,0.3);
	box-shadow: 4px 5px 4px 2px rgba(0,0,0,0.3);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);

	-moz-user-select: none; /* Firefox */
	-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
	-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
	user-select: none; /* Propriété standard */
	
	
	
}

.gem{
	width:30%;
	height:30%;
	margin : auto;
	cursor: pointer
}

.choixexo{
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;	
	vertical-align:middle;
	padding: 5px; 
	font-family: "AffogatoB", sans-serif;
	font-size: 30px;
	color: #9b2590;
	line-height: 40px;
	overflow: hidden;
	border: none;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-align: left;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);

	-moz-user-select: none; /* Firefox */
	-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
	-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
	user-select: none; /* Propriété standard */

}

.elv{
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;	
	vertical-align:middle;
	padding: 5px; 
	font-family: "AffogatoB", sans-serif;
	font-size: 30px;
	color: #FFFFFF;
	line-height: 40px;
	overflow: hidden;
	border: none;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-align: left;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);

	-moz-user-select: none; /* Firefox */
	-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
	-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
	user-select: none; /* Propriété standard */

}

.screen{
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;	
	vertical-align:middle;
	padding: 5px; 
	font-family: "AffogatoR", sans-serif;
	font-size: 20px;
	color: #FFFFFF;
	line-height: 40px;
	overflow: hidden;
	border: none;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-align: left;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);

	-moz-user-select: none; /* Firefox */
	-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
	-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
	user-select: none; /* Propriété standard */
	


}
.screen2{	
	font-family: "Special", sans-serif;
	/* font-size: 2em; */
	text-align: center;	
	/* display: none; */
	visibility: hidden;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	color: rgb(0, 0, 0);
	pointer-events: none;

	-moz-user-select: none; /* Firefox */
	-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
	-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
	user-select: none; /* Propriété standard */
}

body { margin: 0;
	background-color: #FFFFFF;
	user-select: none; /* Propriété standard */	
	
 }
.main{   
    position: absolute;
    display: block;
	margin: 0 auto;
	
}