@font-face{
	font-family : 'neuropolitical';
	src : url('../../fonts/neuropolitical.ttf');
}

@font-face{
	font-family : 'Denise';
	src : url('../../fonts/Denise_Handwriting.ttf');
}

*{
	padding : 0;
	margin : 0;
	box-sizing : border-box;
}

html{
	-webkit-user-select : none;
	-moz-user-select : none;
	-ms-user-select : none;
}

.container{
	position : relative;
	display : flex;
	align-items : center;
	justify-content : center;
	width : 100vw;
	height : 100vh;
	min-width : 100vw;
	min-height : 100vh;
	background : -webkit-linear-gradient(63deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(63deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(0deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), -webkit-linear-gradient(-90deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
	background : -moz-linear-gradient(27deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(207deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(27deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(207deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(90deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), -moz-linear-gradient(180deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
	background : linear-gradient(27deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(27deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(90deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), linear-gradient(180deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
	-webkit-background-size : 20px 20px;
	background-size : 20px 20px;
	background-position : 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
	-webkit-background-origin : padding-box;
	background-origin : padding-box;
	padding: 24px;
}

.menu{
	width : 100%;
	height : auto;
	stroke-linecap : round;
	stroke-linejoin : round;
	max-width : 792px;
	max-height : 100%;
}

@media screen and (min-width : 512px){
	.menu{
		max-width : 65vw;
		max-height : 65vh;
	}
}

.main-menu{
	cursor : pointer;
}

[class$="-button"]{
	cursor : pointer;
}

[class$="-button"] path{
	pointer-events : none;
}

.gammesN1{
	font-size : 3em;
	text-anchor : middle;
}

.notes{
	font-size : 3em;
	text-anchor : middle;
}

header{
	position : absolute;
	top : 0;
	left : 0;
	right : 0;
	padding : 0;
	margin : 0;
	height : 100px;
	z-index : 100;
}

header h1{
	margin : 0;
	padding : 0;
	height : 100%;
	width : 100%;
	display : flex;
	align-items : center;
	justify-content : center;
	color : #ddd;
	text-shadow : 0 0 5px #00c5e0;
}

footer{
	position : absolute;
	bottom : 0;
	left : 0;
	text-align : right;
	text-decoration : none;
	padding : 50px 100px 50px 100px;
	font-family : neuropolitical;
	font-size : .8em;
	color : #eee;
	text-shadow : 0 0 10px #222;
}

footer #author{
	display : inline;
	font-family : Denise;
	font-size : 2em;
	color : #eef;
}

nav{
	position : absolute;
	right : 50px;
	bottom : 50px;
	width : 200px;
	height : 200px;
	z-index : 100;
}

#US_FR_SwitchBox{
	height : 50px;
	width : 100%;
}

#Relative_Full_SwitchBox{
	height : 50px;
	width : 100%;
}

#Alea_Fixed_SwitchBox{
	height : 50px;
	width : 100%;
}

#menu{
	height : 25%;
	width : 100%;
	display : flex;
	align-items : center;
	justify-content : center;
}

.pre{
	position : relative;
	float : left;
	display : flex;
	align-items : center;
	justify-content : right;
	height : 50px;
	width : 70px;
	margin : 0;
	padding-right : 10px;
	color : #eee;
	font-size : 1.2em;
	text-shadow : 0 0 5px #e00046;
}

.onoffswitch{
	position : relative;
	display : flex;
	align-items : center;
	float : left;
	height : 50px;
	width : 60px;
}

.post{
	position : relative;
	display : flex;
	align-items : center;
	justify-content : left;
	height : 50px;
	width : 70px;
	margin : 0 0 0 130px;
	padding-left : 10px;
	color : #eee;
	font-size : 1.2em;
	text-shadow : 0 0 5px #00c5e0;
}

.onoffswitch-checkbox{
	display : none;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner{
	margin-left : 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch{
	right : 0px;
	background-color : #424242;
}

.onoffswitch-label{
	display : block;
	width : 100%;
	overflow : hidden;
	cursor : pointer;
	border : 2px solid #424242;
	border-radius : 50px;
}

.onoffswitch-inner{
	display : block;
	width : 200%;
	margin-left : -100%;
	transition : margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before, .onoffswitch-inner:after{
	display : block;
	float : left;
	width : 50%;
	height : 8px;
	padding : 0;
	box-sizing : border-box;
}

.onoffswitch-inner:before{
	content : "";
	padding-left : 10px;
	background-color : #00c5e0;
}

.onoffswitch-inner:after{
	content : "";
	padding-right : 10px;
	background-color : #e00046;
	text-align : right;
}

.onoffswitch-switch{
	display : block;
	width : 20px;
	height : 20px;
	margin : -5px;
	background-color : #424242;
	position : absolute;
	top : 20px;
	bottom : 0;
	right : 46px;
	border : 2px solid #424242;
	border-radius : 50px;
	transition : all 0.3s ease-in 0s;
}