@import url(https://fonts.googleapis.com/css?family=Gloria+Hallelujah);

*, *:before, *:after {
	box-sizing: border-box;;
}

body, html {
	padding: 0;
	margin: 0;

	font-family: 'Gloria Hallelujah', cursive;
}

body {
	background: url('images/bg.png');
	background-size: 20%;
}

#wrapper {
	width: 864px;
	padding: 15px 25px;
	margin: 0 auto;
	background-color: #fff;
	border-left: 1px solid #efefef;
	border-right: 1px solid #efefef;
}

h1 {
	text-align: center;
	margin-bottom: 0;
}

h3 {
	text-align: center;
	margin-top: 0;
	color: #777;
}

.message {
	background-color: #fff;
	width: 100%;
	padding: 10px;
	margin-bottom: 15px;
	border-radius: 2px;
	box-shadow: 0px 1px 5px #bcbcbc;
	-webkit-transition: box-shadow 0.25s ease-in-out;
	-o-transition: box-shadow 0.25s ease-in-out;
	transition: box-shadow 0.25s ease-in-out;
}

	.message:hover {
		box-shadow: 0px 3px 8px #bcbcbc;
	}

	.message h4 {
		margin-top: 0;
		margin-bottom: 5px;
		position: relative;
		display: inline-block;
	}

		.message h4:after {
			content: '';
			display: inline-block;
			position: absolute;
			border: 1px solid;
			bottom: 0;
			left: -5px;
			width: calc(100% + 10px);
		}

			.message h4.s:after {
				border-color: #1EB3B1;
			}

			.message h4.m:after {
				border-color: #AF5EAB;
			}

			.message h4.j:after {
				border-color: #FA911C;
			}

			.message h4.d:after {
				border-color: #3BC9F1;
			}

	.message p {
		margin: 0;
	}

#game {
	margin-top: 25px;
	margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card {
	margin-bottom: 15px;

	box-shadow: 0px 1px 5px #bcbcbc;
	-webkit-transition: box-shadow 0.25s ease-in-out;
	-o-transition: box-shadow 0.25s ease-in-out;
	transition: box-shadow 0.25s ease-in-out;
}
	.card:hover {
		box-shadow: 0px 3px 8px #bcbcbc;
		cursor: pointer;
	}

.card, .front, .back {
	width: 150px;
	height: 200px;
	position: relative;
	border-radius: 5px;
}

.front, .back {
	position: absolute;
	top: 0;
	left: 0;
}

.front {
	z-index: 2;
    background-image: url('images/card-bg.png');
    background-size: 45%;
    background-position: center;
    border: 7px solid white;
}

.back {
	/*z-index: 5;*/
	-webkit-background-size: 150px;
	background-size: 150px;
	background-repeat: no-repeat;
}

	.back.adventure-is-out-there {
		background-image: url('images/cards/adventure-is-out-there.jpg');
	}

	.back.ambar-beer {
		background-image: url('images/cards/ambar-beer.jpg');
	}

	.back.android-logo {
		background-image: url('images/cards/android-logo.jpg');
	}

	.back.calle-del-laurel {
		background-image: url('images/cards/calle-del-laurel.jpg');
	}

	.back.camera {
		background-image: url('images/cards/camera.jpg');
	}

	.back.friends {
		background-image: url('images/cards/friends.jpg');
	}

	.back.gluten-free {
		background-image: url('images/cards/gluten-free.jpg');
	}

	.back.harry-potter {
		background-image: url('images/cards/harry-potter.jpg');
	}

	.back.juanky-dev {
		background-image: url('images/cards/juanky-dev.jpg');
	}

	.back.licence-plate {
		background-image: url('images/cards/licence-plate.jpg');
	}

	.back.names {
		background-image: url('images/cards/names.jpg');
	}

	.back.popcorn {
		background-image: url('images/cards/popcorn.jpg');
	}

	.back.rubiks-cube {
		background-image: url('images/cards/rubiks-cube.jpg');
	}

	.back.skateboard {
		background-image: url('images/cards/skateboard.jpg');
	}

	.back.spinach {
		background-image: url('images/cards/spinach.jpg');
	}

	.back.sunshine-to-logrono {
		background-image: url('images/cards/sunshine-to-logrono.jpg');
	}

	.back.telescope {
		background-image: url('images/cards/telescope.jpg');
	}

	.back.tequila {
		background-image: url('images/cards/tequila.jpg');
	}

	.back.totem {
		background-image: url('images/cards/totem.jpg');
	}

	.back.visit-malta {
		background-image: url('images/cards/visit-malta.jpg');
	}

@media screen and (max-width: 900px) {
	#wrapper {
		width: 700px;
	}
}

@media screen and (max-width: 768px) {
	#wrapper {
		width: 540px;
	}
}

@media screen and (max-width: 600px) {
	#wrapper {
		width: 100%;
	}

	.card, .front, .back {
		width: 125px;
		height: 175px;
	}

	.back {
		background-size: 125px 175px;
	}
}