/* Tablet Landscape max-width: 1200px */
@media screen and (max-width: 75em) {
	html {
		font-size: 56.25%;
	}

	.deck {
		padding: 3rem;
	}
}

/* Tablet Portrait max-width: 900px */
@media screen and (max-width: 56.25em) {
	html {
		font-size: 50%;
	}
}

/*Phones max-width: 600px */
@media screen and (max-width: 37.5em) {
	.header {
		padding: 1rem;
	}

	.info-panel {
		width: 95%;
		min-width: 30rem;
		margin-bottom: 1rem;
	}

	.stars,
	.moves,
	.timer {
		margin: 0;
		padding: 0;
		display: inline-block;
		margin-right: 1.5rem;
	}

	.deck {
		padding: 0.5rem;
	}

	.card {
		height: 8rem;
		width: 8rem;
		margin: 1rem;
		-webkit-box-shadow: 2px 1px 1rem 0 rgba(37, 89, 131, 0.4);
		        box-shadow: 2px 1px 1rem 0 rgba(37, 89, 131, 0.4);
	}

	.card.show,
	.card.match {
    	font-size: 5rem;
	}
	
	.modal-content {
		min-width: 30rem;
		min-height: 20rem;
	}

	.modal-close {
		position: absolute;
		top: 1rem;
	}

	.congrats-svg {
		width: 8rem;
	}
	
	.congrats-info {
		margin: 0;
	}
}	

/*Small Phones max-width: 480px */
@media screen and (max-width: 30em) {
	.card {
		height: 7rem;
		width: 8rem;
		margin: 0.8rem;
	}
}

/*Large Desktop: 1800px */
@media screen and (min-width: 112.5em) {
	html {
		font-size: 75%;
	}

	.deck {
		padding: 4rem 10%;
	}	
}