body, html {
	height: 100%;
	width: 100%;
	text-align: center;
	margin: 0;
	font-family: 'Roboto Mono', monospace;
	font-size: 12px;
	color: #222;
	text-shadow: 0px 0px 1px #ccc;
}

h1 {
	font-weight: normal;
	font-size: 1.8em;
	margin-top: 1em;
	margin-bottom: 1em;
}

p {
	margin-top: 1.5em;
}

a:link, a:visited, a:active {
	text-decoration: none;
	color: inherit;
}

a:hover {
	text-decoration: underline;
}

.container {
	width: 100vw;
	max-width: 320px;
	height: 100vw;
	max-height: 320px;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
}

.card {
	width: 23%;
	height: 23%;
	margin: 1%;
	box-sizing: border-box;
}

.front, .back {
	border: 1px solid #333;
	border-radius: 10%;
	box-sizing: border-box;
	box-shadow: 0px 0px 10px 0px #ccc;
	transition: 0.5s;
}

.card:hover .front {
	box-shadow: 0px 0px 10px 0px #333;
}

.back {
	background-size: cover; 
}

.type-0 .back {
	background-image: url(../img/noun_1284499_cc.png);
}

.type-1 .back {
	background-image: url(../img/noun_1284495_cc.png);
}

.type-2 .back {
	background-image: url(../img/noun_1284489_cc.png);
}

.type-3 .back {
	background-image: url(../img/noun_1284485_cc.png);
}

.type-4 .back {
	background-image: url(../img/noun_1284481_cc.png);
}

.type-5 .back {
	background-image: url(../img/noun_1284498_cc.png);
}

.type-6 .back {
	background-image: url(../img/noun_1284479_cc.png);
}

.type-7 .back {
	background-image: url(../img/noun_1284477_cc.png);
}

.hidden {
	opacity: 0;
	transition: 0.3s;
}

/*flipping animation css*/
/* entire container, keeps perspective */
.flip-container {
	perspective: 300px;
}
/* flip the pane when hovered */
.picked .flip-container .flipper {
	transform: rotateY(180deg);
}

.flip-container, .front, .back {
	width: 100%;
	height: 100%;
}

/* flip speed goes here */
.flipper {
	height: 100%;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}

/* responsive */
@media screen and (min-width: 550px) {
	body {
		font-size: 14px;
	}

	.container {
		max-width: 480px;
		max-height: 480px;
	}
}

/* disable hover styling on touch devices */
@media (pointer:coarse) {
	.card:hover .front {
		box-shadow: 0px 0px 10px 0px #ccc;
	}
}