* {
	box-sizing: border-box;
}
body {
	min-height: 100vh;
	background-color: #2D322E;
	margin: 0;
	font-family: helvetica, Arial, Lucida,  
}

.row:after {
	content: "";
	display: table;
	clear: both;
}
.col50 {
	float: left;
	width: 50%;
}
.bloc {
	/* espace entre les colonnes */
	padding: 10px;
}

label{
	text-align: center;
	color: white;
	display: inline-block;
	width: 200px;
	padding-bottom: 20px;
}

fieldset {
	margin-left: 85px;
	margin-right: 665px;
}

.formulaire {
	margin-left: 600px;
	margin-top: 37px;

}

.section_3 .button {
	margin-left: -600px;
}

.section_1_i img {
	margin-top: 10px;
	height: 125px;
	width: 125px;
	border-radius: 100%;
}

.section_1_p2 img {
	margin-top: 10px;
	height: 125px;
	width: 125px;
	border-radius: 100%;
}

.spin img {
	height: 291px;
	width: 290px;
	margin-left: 810px;
}



.section_2_p2 h3 {
	text-align: center;
	color: white;
}

.section_1_i h1 {
	margin-left: -890px;
	color: white;
	font-size: 30px;
}

.section_2_p2 h1 {
	color: white;
	margin-right: 280px;
	margin-left: -940px;
	margin-top: 30px;
	font-size: 30px;
}

.h2_index h2 {
	font-size: 30px;
	text-align: center;
	color: white;

}

#mise_totale {
	color: white;
	margin-left: 283px;
}

.noire {
	margin-left: 160px;
}

.buttons {
	text-align: center;
	padding: 30px 10px 10px; 
}

.button {
	background-color: #4CAF50;
	color: white;
	font-size: 17px;
	line-height: 17px;
	border-radius: 5px;
	padding: 5px 32px;
	text-decoration: none;
	display: inline-block;
	transition-duration: .4s;
}



#btn-jouer {
	margin-left: 900px;
	background-color: #4CAF50;
	color: white;
	font-size: 17px;
	line-height: 17px;
	border-radius: 5px;
	padding: 5px 32px;
	text-decoration: none;
	display: inline-block;
	transition-duration: .4s;
}

#connecter {
	background-color: #4CAF50;
	color: white;
	font-size: 16px;
	border: 2px solid #4CAF50;
	border-radius: 5px;
	padding: 5px 8px;
	text-decoration: none;
	display: inline-block;
	transition-duration: .4s;
}

#données_invalide {
	margin-left: 203px;
}

.button:hover {
	background-color: transparent;
	color: white;
}

.2boutons {
	margin-left: 20px;

}

.section_1_i {
	display: flex;
	justify-content: space-around;
}

.section_2_p2 {
	margin-left: 1730px;
	margin-top: -130px;
	display: flex;
	justify-content: space-around;
}

.rouge {
	width: 100px;
	height: 100px;
	background-color: red;
	border-radius: 100%;
}

.noire {
	width: 100px;
	height: 100px;
	background-color: black;
	border-radius: 100%;
}

.fieldset {
	display: flex;
	flex-wrap: wrap;
}

.rouge .boutons {
	width: 100px;
	height: 100px;
	background-color: red;
	border-radius: 100%; 
}
.rouge .bouton {
	width: 100px;
	height: 100px;
	background-color: red;
	border-radius: 100%; 
	color: white;
	font-size: 17px;
	line-height: 17px;
	padding: 16px 32px;
	text-decoration: none;
	display: inline-block;
	transition-duration: .4s;
}

.noire .boutons {
	width: 100px;
	height: 100px;
	background-color: black;
	border-radius: 100%; 
}
.noire .bouton {
	width: 100px;
	height: 100px;
	background-color: black;
	border-radius: 100%; 
	color: white;
	font-size: 17px;
	line-height: 17px;
	padding: 16px 32px;
	text-decoration: none;
	display: inline-block;
	transition-duration: .4s;
}

.section_3 .button {
	background-color: red;
} 

#p1{
	margin-left: 800px;
} 

@keyframes rotation {
	0% {
		transform: rotate(0) translateX(0px);
	}
	
	100% {
		transform: rotate(360deg) translateX(0px);
	}
}