body {

}

header {		
	background: lightblue;
	color: black;
	text-align: center; 
	font: bold italic 3em Arial, sans-serif;
	margin: 10px;
	padding: 10px;
	border: solid black 5px;

}

main {
	background: lightblue;
	color: black;
	text-align: left; 
	font: bold  1em Arial, sans-serif;
	margin: 10px;
	padding: 6px;
	border: solid black 2px;
} 

.kasten {
	background: lightgrey;
	margin: 10px;
	padding: 6px;
	border: solid black 1px;	
	border-radius: 5px;
}

.tasteDunkelgrau, .tasteOrange, .tasteHellgrau {
	font:  1em Arial, sans-serif;
	border: solid black 0px;
	border-radius: 50%;
	width: 2em;
	height: 1em;
	text-align: center; 
	padding: 0.5em 0;
	margin: 0.1em;
	color: white;
}

.tasteDunkelgrau {
	background: #303030;
}

.tasteOrange {
	background: orange;
}

.tasteHellgrau {
	background: lightgrey;
	color: black;
}

.taschenrechner {
	background: black;
	border: 0px;
	padding: 0;
	margin: 0;
}

.taschenrechnerAnzeige {
	background: black;
	font:  1.5em Arial, sans-serif;
	color: white;
	border: 0px;
}



/**************** game ****************/
.game {
	display: grid;
	grid-template-columns: max-content auto;
}
	
@media screen and (max-width: 80em) {
	.game {
		display: grid;
		grid-template-columns: auto;
	}
}

.gamecontent {
	display: grid;
	grid-template-columns: max-content auto;
}

.gamecontroller, .gamescore, .gameboard {
	background: black;
	color: white;
	padding: 3px 3px;
}

.gamecontroller {
	display: grid;
	grid-template-columns: max-content max-content max-content max-content max-content;

}

.gamebutton, .gamescorecell, .gameboardcontent {
	padding: 3px 3px;
	margin: 3px 3px;
	border: solid white 2px;
	border-radius: 3px;
	text-align: center; 
}

.gamebutton {
	background: grey;
	font:  0.9em Arial;
	text-align: center;
}

.gamescore {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;

}

.gamescorecell {
	display: grid;
	grid-template-columns: auto auto;
	font:  1.1em Arial, bold;
}

.gameboardcontent {

}

.field {
	font:  0em Arial, sans-serif;
	padding: 0px 0px;
	margin: 0px 0px;
	border-width: 0px;
	border-spacing: 0;
}

.gamedesign {
	color: white;
	background: grey;
	overflow-x: auto;
}

.gamedesigncell {
	display: grid;
	grid-template-columns: 20% auto;
	font:  0.9em Arial;
	padding: 3px 3px;
	margin: 3px 3px;
	border: solid white 2px;
	border-radius: 3px;
}

.gametext {
	background: black;
	color: white;
	padding: 3px 3px;	
}

.gametextcontent {
	font:  0.9em Arial;
	padding: 3px 3px;
	border: solid white 2px;
	border-radius: 3px;
}

.gameoverlay {
	position: absolute;
	top: 20%;
	left: 5%;
	opacity: 0.75;
	padding: 10px 10px;
	margin: 10px 10px;
	font-size: 2em;
	color: white;
	background: grey;
	display: none;
	z-index: 1;
}