body {
	font-family: sans-serif;
}

.GameField {
	display: grid;
	grid-template-columns: auto;
	background-color: green;
	padding: 1em;
}

#CardStack {
	display: grid;
	grid-template-columns: repeat(6, auto);
}

p.note {
	font-size: smaller;
}

div.card {
	background-color: #f1f1f1;
	display: inline;
	text-align: center;
	font-size:20vw; /* Scale with page size nicely (does not obey zoom.) */
}

p.cardName {
	text-align: center;
	display: inline;
	background-color: #e2c2a2;
	font-weight: 600;
}

#ButtonLine {
	display: grid;
	grid-template-columns: repeat(3,auto);
}

#ScoreBoard {
	box-sizing: border-box;
	max-width: 50ch;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	padding: 0.5em;
	padding-top: 0;
	padding-bottom: 0;
	border: 0.25em solid black;
	display: grid;
	grid-template-columns: 25fr 75fr;
}

p.boardTitle{
	grid-column: 1 / span 2;
	font-weight: 900;
	text-align: center;
	border-bottom: 0.15em solid black
}

p.boardItemTitle{
	text-align: center;
	font-weight: 600;
}

button {
	padding-top: 1em;
	padding-bottom: 1em;
}