*
{
	font-family: Garamond, serif;
	font-weight: bold;
	font-style: normal;
	font-size: 1.02em;
	line-height: 30px; 
	text-decoration: none;
	text-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
}

body { background: url( "http://us.cdn4.123rf.com/168nwm/kgtoh/kgtoh0807/kgtoh080700362/3334798-brushed-metal-surface-texture-seamless-background-illustration.jpg" ); }

h1, h2, h3, footer
{
	position: relative;

	font-weight: bold;
	color: rgb( 230, 230, 230 );

	width: 100%;
	
	text-shadow:0px 0px 0 rgb(139,139,139),1px 1px 0 rgb(124,124,124),2px 2px 0 rgb(110,110,110),3px 3px 0 rgb(95,95,95),4px 4px 0 rgb(81,81,81),5px 5px 0 rgb(66,66,66), 6px 6px 0 rgb(52,52,52),7px 7px 6px rgba(0,0,0,0.6),7px 7px 1px rgba(0,0,0,0.5),0px 0px 6px rgba(0,0,0,.2);
}

h1
{
	font-size: 3em;
	left: 40%;
}

h2
{
	font-size: 2em;
	left: 5%;
	counter-increment: titreh2
}
h2::before{
	content: ""counter(titreh2)") ";
}

.align
{
	position: relative;
	left: 10%;

	width: 80%;
}

code
{
	white-space: pre;
}
footer span a{
	display: inline;
	margin-left: 10%;
}

/*----------------------------animation----------------------------------*/
#anim{

	width: 100%;
	margin: 0;
	height: 100px;
	border: 1px solid black;
	padding-top: 40px;
	box-shadow: 0px 0px 10px 2px #656565;

	background: rgba(226,226,226,1);
	background: -moz-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(230,227,230,1) 46%, rgba(168,168,168,1) 62%, rgba(140,140,140,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(226,226,226,1)), color-stop(46%, rgba(230,227,230,1)), color-stop(62%, rgba(168,168,168,1)), color-stop(100%, rgba(140,140,140,1)));
	background: -webkit-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(230,227,230,1) 46%, rgba(168,168,168,1) 62%, rgba(140,140,140,1) 100%);
	background: -o-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(230,227,230,1) 46%, rgba(168,168,168,1) 62%, rgba(140,140,140,1) 100%);
	background: -ms-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(230,227,230,1) 46%, rgba(168,168,168,1) 62%, rgba(140,140,140,1) 100%);
	background: linear-gradient(to bottom, rgba(226,226,226,1) 0%, rgba(230,227,230,1) 46%, rgba(168,168,168,1) 62%, rgba(140,140,140,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#8c8c8c', GradientType=0 );

}
.bloc{

	position: absolute;
	display: inline-block;
	height: 50px;
	width: 50px;
	background-image: url('aimant.png');
}
#bloc{	left: 200px; }
#bloc2{	left: 550px; }
#bloc3{	left: 1000px; }

.bille{

	position: absolute;
	display: inline-block;
	width: 50px;
	height: 50px;
	border-radius: 500%;
	background-image: url('bille.png');
}
#bille1{ left: 9px; }
#bille2{ left: 250px; }
#bille3{ left: 300px; }
#bille4{ left: 600px; }
#bille5{ left: 650px; }
#bille6{ left: 1050px; }
#bille7{ left: 1100px; }
/*-----------------------------------------------------------------------*/
/*-------------------------------------QUIZZ-------------------------------*/
.reponse{

	color: blue;
	margin: 1%;
}
.reponse + span{

	display: none;
	color: green;
	font-size: 1.1em;
}
.reponse:active + span{

	display: inline;
}
legend{

	color:#343434;
	box-shadow: 0px 0px 10px #343434;
	border-radius: 5px;
	border: 1px solid #656565;
	background: #cccccc;
	transition-duration : 0.5S;
}
input{

	color:#343434;
	box-shadow: 0px 0px 10px #343434;
	border-radius: 5px;
	border: 1px solid #656565;
	background: #cccccc;
	transition-duration : 0.5S;
}
#handle{
	margin-left: 37.4%;
	width: 10%;
}
#reset{
	margin-left: 5%;
	width: 10%;
}
input:hover{

	background: linear-gradient(#cfcfcf, #656565); 
}
/*-------------------------------------------------------------------------*/