/***** Global *****/
/* Body */
html {height:100%;}
body {
	background: url(../static/background.jpg) no-repeat fixed right;
	background-size:cover;
	font-family: 'Josefin Sans', sans-serif;
	display:flex; align-items:center; justify-content: center; 
	min-height:100%;
	margin: 0;
	padding: 0;
}
h1,h2 {color:#fff; font-family:'Josefin Slab', serif; text-align: center; text-shadow: 1px 2px 0px #000000;}
h1 {margin-top:0; padding:.5em; font-size:2.5rem;}
h2 {font-size:2rem;}
p {padding:1rem; background:#ffffffe5; font-size:1.25rem; text-align: center;}
a {color:#C4243C; text-decoration: none;}
main {padding:1em;}
.card-container {}
.card {display:block; margin:1em; padding:1em; background:#fff;text-align: center;}

.card:hover {transform: translate(0px, -5px); box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.77); transition:.3s;}
.card:focus {transform: translate(0px, 5px); box-shadow: none;}
.card img {width:100%; margin-bottom:.5em;}

@media (min-width: 768px) {
	main {padding:4rem 2rem;}
	.card-container {display:grid; grid-template-columns: 1fr 1fr;}
	.card {}
}
@media (min-width: 992px) {
	main {width:800px;}
	.card-container {grid-template-columns: 1fr 1fr 1fr;}
}

@media (min-width: 1200px) {
	main {padding:4rem 0;}
}