/* /pbg/Card Match/styles.css */
body {
	font-family:sans-serif;
	background-color:green;
	color:ivory;
}
#main {
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}
#head {
	display:flex;
	justify-content:space-around;
	align-items:center;
	margin:2vmin 0 1vmin 0;
}
#head img {
	height:7vmin;
}
#title {
	font-family:Georgia,serif;
	font-style:italic;
	font-size:5vmin;
}
#score {
	font-size:4vmin;
	padding: 5px 10px 2px 10px;
}
.highlight {
	background-color:yellow;
	color:blue;
}
#next, #back {
	visibility:hidden;
}
#page1 {
	display:flex;
	flex-direction:column;
	align-items:center;
}
.row {
	display:flex;
	align-items:center;
	border:.5vmin solid ivory;
	margin:2vmin 0;
	background-color:mediumseagreen;
	padding:0 1vmin;
	font-size:3vmin;
}
.row img {
	height:16vmin;
	margin:1vmin;
}
.score {
	padding-right: 10px;
}
#page2, #page3, #page4 {
	display:none;
	justify-content:center;
	align-items:center;
	flex-direction:column;
}
#page2 {
	margin-bottom:12vmin;
}
#page3 {
	margin-bottom:9vmin;
}
#page4 {
	margin-bottom:6vmin;
}
.row1 {
	background-color:green;
	margin-bottom:0;
	border:none;
}
.row1 img {
	height:28vmin;
}
.move {
  transform:translateX(21.44vmin);
  transition:transform 2s;
}
.card0 {
	display:grid;
}
.card0 img {
	grid-column:1/span1;
	grid-row:1/span1;
}
.join {
	width:12%;
	margin-top:-1vmin;
}
#j0 {width:16%;}
#j1 {width:30%;}
#j2 {width:45%;}
.same_diff {
	display:flex;
	width:40%;
	justify-content:space-around;
}
#same0, #diff0, #same1, #diff1, #same2, #diff2 {
	display:flex;
	flex-direction:column;
	align-items:center;
	padding:2vmin;
	cursor:pointer;
}
.button {
	background-color:ivory;
	padding: 6px 12px 4px 12px;
	border-style:outset;
	border-radius: 10px;
	display:flex;
	justify-content: center;
	cursor:pointer;
	color:black;
	font-size:4vmin;
}