@charset "utf-8";
/* CSS Document */

body{
	background-color: #934242;
}
/* Navigation 1 */
/*contenu*/

body > nav > ul li a{
	text-decoration: none;
	list-style-type: none;
}
body > nav{
	display: flex;
	flex-flow: column wrap;
	margin: 0 auto;
	width: 30%;
	min-width: 150px;
}
.spect{
	margin: 0 auto;
	width: 100%;
}
.riboul{
	width: 300px;
	height: 200px;
	margin: 0 auto;
	background-image: url(../mobile.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.trotti{
	width: 300px;
	height: 200px;
	margin: 0 auto;
	background-image: url(../trot.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.scarabe{
	width: 300px;
	height: 200px;
	margin: 0 auto;
	background-image: url(../scarab.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.rib{
	flex: 1 1 auto;
	width: 100%;
	max-width: 320px;
	min-width: 200px;
	border: 3px solid #B2CC99;
	border-radius: 25%;
	padding: 10px;
	margin: 20px auto;
	text-align: center;
	list-style-type: none;
	background-color: #660000;
}
.rib a{
	color: #B2E2D8;
	font-size: 1.3em;
}
.trot{
	flex: 1 1 auto;
	width: 100%;
	max-width: 320px;
	min-width: 200px;
	border: 3px solid #FF9900;
	border-radius: 25%;
	padding: 10px;
	margin: 20px auto;
	text-align: center;
	list-style-type: none;
	background-color: #4A6850;
}
.trot a{
	color: #CCCC66;
	font-size: 1.3em;
}
.scarab{
	flex: 1 1 auto;
	width: 100%;
	max-width: 320px;
	min-width: 200px;
	border: 3px solid #FFCC00;
	border-radius: 25%;
	padding: 10px;
	margin: 20px auto;
	text-align: center;
	list-style-type: none;
	background-color: #826242;
}
.scarab a{
	color: #96BAA2;
	font-size: 1.3em;
}
.jul{
	flex: 1 0 auto;
	width: 100%;
	max-width: 320px;
	min-width: 200px;
	border: 3px solid #5A662B;
	border-radius: 25%;
	padding: 10px;
	margin: 20px auto;
	text-align: center;
	list-style-type: none;
	background-color: #8DB68E;
}
.jul a{
	color: #5A662B;
	font-size: 1.3em;
}
span{
	color: #F1FFBF;
	font-size: 0.7em;
	font-style: italic;
	letter-spacing: 0.2em;
}
@media screen and (min-width: 980px){
	
	.spect{
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 80%;
		margin: 0 auto;
	}
	.riboul{
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		margin: 0px auto;
	}
	.trotti{
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		margin: 0 auto;
	}
}