* {
	box-sizing: border-box;
}

body {
	font-family: Arial, sans-serif;
	text-align: center;
}

h1 {
	font-size: 40px;
}

.submit {
	margin-top: 2em;
	font-size: 16px;
	padding: 1em 3em;
	background: #BADA55;
	color: #000;
}

.submit:disabled {
	background: #C5DA83;
	color: #666;
}

.wrapper {
	width: 1080px;
	margin: 0 auto;
}

.card {
	display: table-cell;
	width: 200px;

	height: 140px;
	border: 2px solid #ccc;
	background: #F5F5F5;
}

.card:hover {
	border-color: #e2e2e2;
}

.selected {
	background: lightgrey;
}

.game-board44 {
	margin-top: -16%;
	height: auto;
	width: auto;
	transform: rotate(90deg);

}

.game-board {
	margin-top: 1%;
	margin-left: 13%;
	height: 700px;
	width: 800px;
	transform: rotate(90deg);

}
.game-board0 {
	margin-top: 30%;
	height: auto;
	width: auto;
	transform: rotate(90deg);

}
.game-board1 {
	margin-top: -5%;
	height: 800px;
	width: 800px;
	margin-left: 38%;
	transform: rotate(90deg);
}


.game-boardHS {
	margin-top: -5%;
	margin-left: 40%;
	height: 800px;
	width: 800px;
	transform: rotate(90deg);
}
.game-boardHS1 {
	margin-top: -5%;
	margin-left: 50%;
	height: 800px;
	width: 800px;
	transform: rotate(90deg);
}


.shape {
	display: inline-block;
	width: 30px;
	height: 68px;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 15px;
	margin-top: 22%;



}


.diamond {
	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
	width: 38px;
}



.diamond.red.stripped {
	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
	width: 38px;
	background: repeating-linear-gradient(25deg, red, red 8px, white 8px, white 15px);
	border: 2px solid red;
}
.diamond.lightblue.stripped {
	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
	width: 38px;
	background: repeating-linear-gradient(25deg, #6495ED, #6495ED 8px, white 8px, white 15px);
	border: 2px solid #6495ED;
}
.diamond.yellow.stripped {
	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
	width: 38px;
	background: repeating-linear-gradient(25deg, saddlebrown, saddlebrown 8px, white 8px, white 15px);
	border: 2px solid saddlebrown;
}
.diamond.green.stripped {
	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
	width: 38px;
	background: repeating-linear-gradient(25deg, green, green 8px, white 8px, white 15px);
	border: 2px solid green;
}
.diamond.purple.stripped {
	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
	width: 38px;
	background: repeating-linear-gradient(25deg, purple, purple 8px, white 8px, white 15px);
	border: 2px solid purple;
}





.diamond.red.stripped.rond{
	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
	width: 38px;
	background: repeating-linear-gradient(25deg, red, red 7px, white 8px, white 15px);
	border: 10px dotted black;


}

.diamond.lightblue.stripped.rond{
	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
	width: 38px;
	background: repeating-linear-gradient(25deg, #6495ED, #6495ED 6px, white 7px, white 14px);
	border: 10px dotted black;

}

.diamond.yellow.stripped.rond{
	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
	width: 38px;
	background: repeating-linear-gradient(25deg, saddlebrown, saddlebrown 6px, white 7px, white 14px);
	border: 10px dotted black;

}

.diamond.green.stripped.rond {
	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
	width: 38px;
	background: repeating-linear-gradient(25deg, green, green 6px, white 8px, white 14px);
	border: 10px dotted black;

}

.diamond.purple.stripped.rond {
	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
	width: 38px;
	background: repeating-linear-gradient(25deg, purple, purple 6px, white 8px, white 14px);
	border: 10px dotted black;
}










.diamond.red.stripped.point{
	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
	width: 38px;
	background: repeating-linear-gradient(25deg, red, red 6px, white 7px, white 14px);
	border: 4px dashed black;

}

.diamond.lightblue.stripped.point{
	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
	width: 38px;
	background: repeating-linear-gradient(25deg, #6495ED, #6495ED 6px, white 7px, white 14px);
	border: 4px dashed black;

}

.diamond.yellow.stripped.point{
	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
	width: 38px;
	background: repeating-linear-gradient(25deg, saddlebrown, saddlebrown 6px, white 7px, white 14px);
	border: 4px dashed black;

}

.diamond.green.stripped.point {
	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
	width: 38px;
	background: repeating-linear-gradient(25deg, green, green 6px, white 7px, white 14px);
	border: 4px dashed black;

}

.diamond.purple.stripped.point {
	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
	width: 38px;
	background: repeating-linear-gradient(25deg, purple, purple 6px, white 7px, white 14px);
	border: 4px dashed black;
}


.diamond.solid.purple.point{

	border: 4px dashed black;
}

.diamond.solid.green.point{
	border: 4px dashed black;
}
.diamond.solid.red.point{
	border: 4px dashed black;
}
.diamond.solid.lightblue.point{
	border: 4px dashed black;
}
.diamond.solid.purple.point{
	border: 4px dashed black;
}
.diamond.solid.yellow.point{
	border: 4px dashed black;
}



.diamond.green.quadrillage{
	background-color: green;
	background-image:
			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%),
			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%);
	background-size: 20px 19px;
	background-position: 0 0, 10px 10px;
	border: 2px solid green;
}
.diamond.red.quadrillage{
	background-color: red;
	background-image:
			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%),
			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%);
	background-size: 20px 19px;
	background-position: 0 0, 10px 10px;
	border: 2px solid red;
}
.diamond.yellow.quadrillage{
	background-color: saddlebrown;
	background-image:
			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%),
			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%);
	background-size: 20px 19px;
	background-position: 0 0, 10px 10px;
	border: 2px solid brown;
}

.diamond.lightblue.quadrillage{
	background-color: #6495ED;
	background-image:
			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%),
			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%);
	background-size: 20px 19px;
	background-position: 0 0, 10px 10px;
	border: 2px solid #6495ED;
}
.diamond.purple.quadrillage{
	background-color: purple;
	background-image:
			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%),
			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%);
	background-size: 20px 19px;
	background-position: 0 0, 10px 10px;
	border: 2px solid purple;
}












.wave {
	border-radius: 15px 180px 15px 180px;
	transform: rotate(1deg) skewX(0.5deg) scaleX(0.8);
	width: 38px;


}








.oval {
	border-radius: 40px / 50px;
	transform: rotate(0.5deg) skewX(1deg) scaleX(0.8);
	width: 38px;
	height: 80px;


}








.rectangle{
	transform: rotate(0.5deg) skewX(1deg) scaleX(0.8);
	width: 38px;

}







.triangle{
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	width: 38px;

}


/*
$colors = array('green', 'red', 'purple', 'lightblue', 'yellow');
$shapes = array('oval', 'diamond', 'wave', 'rectangle','triangle');
$fills = array('solid', 'stripped', 'open', 'quadrillage','pointille');
$borders = array('plein', 'point', 'rond', 'zigzag','hachure');

*/








.green.pointille{
	background-image: radial-gradient(green 40%, #F5F5F5 40%),
	radial-gradient(green 20%, #F5F5F5 20%),
	radial-gradient(#fafafa 10%, transparent 10%);
	background-position: 0 0, 1px 1px;
	background-size: 15px 15px;
	border: 2px solid green;
}

.red.pointille{
	background-image: radial-gradient(red 40%, #F5F5F5 40%),
	radial-gradient(red 20%, #F5F5F5 20%),
	radial-gradient(#fafafa 10%, transparent 10%);
	background-position: 0 0, 1px 1px;
	background-size: 15px 15px;
	border: 2px solid red;

}
.yellow.pointille{
	background-image: radial-gradient(saddlebrown 40%, #F5F5F5 40%),
	radial-gradient(saddlebrown 20%, #F5F5F5 20%),
radial-gradient(#fafafa 10%, transparent 10%);
	background-position: 0 0, 1px 1px;
	background-size: 15px 15px;
	border: 2px solid saddlebrown;
}
.lightblue.pointille{
	 background-image: radial-gradient(#6495ED 40%, #F5F5F5 40%),
	 radial-gradient(#6495ED 20%, #F5F5F5 20%),
	 radial-gradient(#fafafa 10%, transparent 10%);
	background-position: 0 0, 1px 1px;
	background-size: 15px 15px;
	border: 2px solid #6495ED;


 }
.purple.pointille{
	background-image: radial-gradient(purple 40%, #F5F5F5 40%),
	radial-gradient(purple 20%, #F5F5F5 20%),
	radial-gradient(#fafafa 10%, transparent 10%);
	background-position: 0 0, 1px 1px;
	background-size: 15px 15px;
	border: 2px solid purple;


}







.green.quadrillage{
	background-color: green;
	background-image:
			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%),
			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%);
	background-size: 15px 15px;
	background-position: 0 0, 8px 8px;
	border: 2px solid green;
}
.red.quadrillage{
	background-color: red;
	background-image:
			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%),
			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%);
	background-size: 15px 15px;
	background-position: 0 0, 8px 8px;
	border: 2px solid red;
}
.yellow.quadrillage{
	background-color: saddlebrown;
	background-image:
			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%),
			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%);
	background-size: 15px 15px;
	background-position: 0 0, 8px 8px;
	border: 2px solid brown;
}

.lightblue.quadrillage{
	background-color: #6495ED;
	background-image:
			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%),
			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%);
	background-size: 15px 15px;
	background-position: 0 0, 8px 8px;
	border: 2px solid #6495ED;
}
.purple.quadrillage{
	background-color: purple;
	background-image:
			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%),
			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%);
	background-size: 15px 15px;
	background-position: 0 0, 8px 8px;
	border: 2px solid purple;
}








.green.rond.open{
	border-style: dotted;
	border-color: green;
	border-width: 7px;

}
.lightblue.rond.open {
	border-style: dotted;
	border-color: #6495ED;
	border-width: 7px;
}

.purple.rond.open {
	border-style: dotted;
	border-color: purple;
	border-width: 7px;
}

.yellow.rond.open {
	border-style: dotted;
	border-color: saddlebrown;
	border-width: 7px;
}

.red.rond.open {
	border-style: dotted;
	border-color: red;
	border-width: 7px;
}










.green.point.open{
	border-style: dashed;
	border-color: green;
}
.red.point.open{
	border-style: dashed;
	border-color: red;
}
.lightblue.point.open{
	 border-style: dashed;
	 border-color: #6495ED;
 }
.purple.point.open{
	border-style: dashed;
	border-color: purple;
}
.yellow.point.open{
	border-style: dashed;
	border-color: saddlebrown;
}











.green.solid {
	background: green;
}


.lightblue.solid {
	background: #6495ED;
}

.red.solid {

	background: red;
}
.purple.solid {
	background: purple;
}

.yellow.solid {
	background: saddlebrown;
}












.solid.plein {
	border: 2px solid black;
}
.solid.rond {
	border-style: dotted;
	border-color: black;
	border-width: 7px;
}


.quadrillage.rond{
	border-style: dotted;
	border-color: black;
	border-width: 7px;
}
.quadrillage.plein{
	border: 2px solid black;
}


.pointille.rond{
	border-style: dotted;
	border-color: black;
	border-width: 7px;
}
.pointille.plein{
	border: 2px solid black;
}

.pointille.point{
	border-style: dashed;
	border-color: black;
	border-width: 2px;
}


.solid.point{
	border-style:  dashed;
	border-color: black;
	border-width: 2px;
}

.quadrillage.point{
	border-style: dashed;
	border-color: black;
	border-width: 2px;
}











.red.open{
	border: 2px solid red;
}


.green.open{
	border: 2px solid green;
}

.lightblue.open {
	border: 2px solid #6495ED;
}

.yellow.open {
	border: 2px solid saddlebrown;
}

.purple.open {
	border: 2px solid purple;
}





.red.stripped{
	background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
	border: 2px solid red;

}

.lightblue.stripped{
	background: repeating-linear-gradient(-45deg, #6495ED, #6495ED 5px, white 5px, white 10px);
	border: 2px solid #6495ED;

}

.yellow.stripped{
	background: repeating-linear-gradient(-45deg, saddlebrown, saddlebrown 5px, white 5px, white 10px);
	border: 2px solid saddlebrown;

}

.green.stripped {
	background: repeating-linear-gradient(-45deg, green, green 5px, white 5px, white 10px);
	border: 2px solid green;

}

.purple.stripped {
	background: repeating-linear-gradient(-45deg, purple, purple 5px, white 5px, white 10px);
	border: 2px solid purple;
}











.red.stripped.rond{
	background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
	border: 7px dotted black;


}

.lightblue.stripped.rond{
	background: repeating-linear-gradient(-45deg, #6495ED, #6495ED 5px, white 5px, white 10px);
	border: 7px dotted black;

}

.yellow.stripped.rond{
	background: repeating-linear-gradient(-45deg, saddlebrown, saddlebrown 5px, white 5px, white 10px);
	border: 7px dotted black;

}

.green.stripped.rond {
	background: repeating-linear-gradient(-45deg, green, green 5px, white 5px, white 10px);
	border: 7px dotted black;

}

.purple.stripped.rond {
	background: repeating-linear-gradient(-45deg, purple, purple 5px, white 5px, white 10px);
	border: 7px dotted black;
}










.red.stripped.point{
	background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
	border: 2px dashed black;

}

.lightblue.stripped.point{
	background: repeating-linear-gradient(-45deg, #6495ED, #6495ED 5px, white 5px, white 10px);
	border: 2px dashed black;

}

.yellow.stripped.point{
	background: repeating-linear-gradient(-45deg, saddlebrown, saddlebrown 5px, white 5px, white 10px);
	border: 2px dashed black;

}

.green.stripped.point {
	background: repeating-linear-gradient(-45deg, green, green 5px, white 5px, white 10px);
	border: 2px dashed black;

}

.purple.stripped.point {
	background: repeating-linear-gradient(-45deg, purple, purple 5px, white 5px, white 10px);
	border: 2px dashed black;
}



/*solution pour avoir l'image en rainure ou vide a voir dans le css*/