html, body {
	position: relative;
	width: 100%;
	height: 100%;
}

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

body {
	background-color: #000;
	color: #eee;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.card > .face {
/*	border: calc(4vmin / var(--columns)) solid white;
	box-shadow: inset 0 0 calc(0vmin / var(--columns)) calc(1.5vmin / var(--columns)) rgba(0, 0, 0, 0.7);*/
}


.card > .back {
	background: 
		linear-gradient( -35deg, rgba(221, 145, 121, 0.322), rgba(155, 156, 187, 0.322)), 
	    url('img/card-back.jpg');
	background-blend-mode: screen;
	background-size: cover;
/*	border: calc(0vmin / var(--columns)) solid #aaa;
	box-shadow: inset 0 0 calc(0vmin / var(--columns)) calc(1.5vmin / var(--columns)) rgba(0, 0, 0, 0.7);*/
}