@font-face{
	font-family:titillium;
	src:url("../fonts/Titillium.ttf");
}
@font-face{
	font-family:oswald;
	src:url("../fonts/Oswald.ttf");
}
*{
	font-family:titillium;
}
body{
	text-align:center;
	margin:0;
	min-height:100vh;
	background-image:url("../images/background.png");
	background-position:center center;
	background-size:cover;
	/*animation-name:back;*/
	animation-duration:20s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
@keyframes back{
	0%{
		background-size:100% auto;
	}
	50%{
		background-size:120% auto;
	}
	100%{
		background-size:100% auto;
	}
}
h1{
	margin:0;
	padding:20px;
	border-bottom:solid 1px rgba(255,255,255,0.4);
	color:#EA2;
	background-color:rgba(0,0,0,0.2);
}
#grille{
	margin-top:50px;
}
#grille input{
	width:60px;
	height:40px;
	font-size:14pt;
	font-weight:bold;
	cursor:pointer;
	background:transparent;
	border:solid 1px #AAA;
	color:#FFF;
	display:inline-block;
	margin:4px 2px;
	transition:all 0.3s ease;
}
#grille input:hover{
	transform:scale(1.2);
	color:#000;
	background-color:#AAA;
	transition:all 0.3s ease;
}
input[type="submit"]{
	width:200px;
	height:40px;
	font-size:14pt;
	font-weight:bold;
	cursor:pointer;
	background-color:#EA2;
	border:solid 1px #EA2;
	color:#000;
	display:inline-block;
	margin:4px 2px;
	visibility:hidden;
}
input[type="submit"]:hover{
	box-shadow:0 0 10px rgba(255,255,255,0.4);
	color:#FFF;
}
#selection{
	margin:20px;
}
#selection input{
	width:60px;
	height:40px;
	font-size:14pt;
	font-weight:bold;
	cursor:pointer;
	background-color:rgba(0,0,0,0.2);
	border:solid 1px #EA2;
	color:#EA2;
	display:inline-block;
	margin:4px 2px;
}
h2{
	margin-top:60px;
	color:#AAA;
}
.numeros{
	display:inline-block;
	border:solid 1px #AAA;
	box-sizing:border-box;
	width:100px;
	padding:20px;
	font-size:24pt;
	color:#EA2;
	margin:6px;
	font-family:oswald;
}
#resultat{
	font-size:24pt;
	background-color:rgba(0,0,0,0.2);
	width:800px;
	margin:60px auto;
	padding:20px;
	visibility:hidden;
}
#resultat span{
	color:#EA2;
}