@import url('https://fonts.googleapis.com/css2?family=Sarala&display=swap');
*{
	margin:0;
	padding:0;
}
html, body{
    height: 100%;
	font-family: 'Sarala', sans-serif;
	background: #17172e;
}
.h1{
	text-align: center;
	margin-top: 23px;
	color: aliceblue;
	margin-bottom: 34px;
}
.container{
	height: 100%;
    display:flex;
    justify-content: center;
    align-items: center;
	flex-wrap: wrap;
	margin-bottom: 25%;
}
.card{
    perspective: 1000px;	
    height: 271px;
    width: 186px;	
    position:relative;
    margin: 5px;
	margin-bottom: 2%;
}
.card img{
    width:100%;
}
.card .frente{
	position:absolute;
    transform:  rotateY(0deg);
	backface-visibility:hidden;
	transition: transform .4s linear;	
}
.card .fundo{
	position:absolute;
	transform: rotateY(180deg);
	backface-visibility:hidden;
	transition: transform .4s linear;
}
.card:hover  .frente{
	transform:  rotateY(-180deg);
	cursor:pointer;
}
.card:hover  .fundo{
	transform:  rotateY(0deg);
	cursor:pointer;
}
.footer{
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	color: white;
}
.img{
	width: 34px;
}
.text{
	margin-left: 4px;
}