
		.container, .card, .face {
		width: 200px;
		height: 200px;
		}
		
		.face{
			position: absolute;
			top: 0px;
			left: 0px;
			backface-visibility: hidden;
			background-color: #066D88;
		}
		.container{
			border: solid black 1px;
			margin: 3em;
			perspective: 300px;
		}
		.front{
			
			background-repeat: no-repeat;
			background-size: cover;
			z-index: 2;
			transform: rotateY(0deg);
		}
		.image1{
			background-image: url(../images/guess2.png);
		}
		.image2{
			background-image: url(../images/guess3.png);
		}
		.image3{
			background-image: url(../images/guess4.png);
		}
		.image4{
			background-image: url(../images/guess5.png);
		}
		.image5{
			background-image: url(../images/guess6.png);
		}
		.image6{
			background-image: url(../images/guess1.png);
		}
		.image7{
			background-image: url(../images/guess7.png);
		}
		.image8{
			background-image: url(../images/guess8.png);
		}
		.image9{
			background-image: url(../images/guess9.png);
			
		}
		.back{
			background-color: aliceblue;
			transform: rotateY(180deg);
			text-align: center;
		}
		p{
			font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
			font-size: 2em;
		}
		.card{
			/*background-image: url(E.png);
			background-image: url(dude.jpg); */ 
			
			position: relative;
			transform-style: preserve-3d;
			transition: all 1s;
		}
		.container:hover .card{
			
			transform: rotateY(180deg)
		}
		.quizz2{
			display: flex;
			flex-wrap: wrap;
			width: 100%;

		}
		.quizz{
			background-color: antiquewhite;
			border: solid;
		}
a{
	color: black;
}

body{
	background-image: url(../images/mystery.png);
	background-size: cover;
}

