body {
	background-color: lightgreen;
	font-family: Arial, sans-serif;
}

.dummy {
	grid-column: auto;
	border: 2px solid black;
	background-color: red;
	width: 100px;
	height: 100px;
}

.whosemove {
	/*positie in diagcontainer*/
	grid-row: 1;
	grid-column: 2;
	height: var(--markerwidth);
	width: var(--markerwidth);
	margin-bottom: auto;
	margin-left: 14px;
	border: 2px solid black;
	border-radius: 50%;
	background-color: white;
}

.blacktomove {
	height: 0px;
	width: 0px;
	border: var(--hmarkerwidth) solid black;
		/*met background-color lukt het niet want we willen afdrukken zonder background (met border lukt het wel, want dat is een voorgrondkleur)*/
}

.diagcontainer {
	padding: 5px;
	display: grid; /*iedere diagcontainer heeft zijn eigen grid binnen het pagegrid; zie bv. page3x4.css voor hoe het grid er precies uitziet*/
	/*grid-template-columns en grid-template-rows in page3x4.css enz.*/
}

.diagcontainerselected {
	background-color: gold;
}

.dummy {
	/*positie in diagcontainer*/
	/*vakje rechtsonder van diagram (gaan we misschien later weer gebruiken)*/
	grid-row: 1;
	grid-column: 2;
	height: var(--markerwidth);
	width: var(--markerwidth);
	margin-top: auto;
	margin-left: 14px;
	margin-bottom: var(--hmarkerwidth); /*komt toevallig goed uit*/
	background-color: gold;
}


.dsubscriptcontainer {
	/*positie in diagcontainer*/
	grid-row: 2;
	grid-column: 1;
	position: relative; /*tbv. positionering xmarkbutton*/
	/*margin-top: 4px;*/
}

.dsubscript {
	height: 80%;
	width: 95%;
	margin-left:5%;
	font-size: 1.8em;
}

.hfdinput {
	border: 0px;
}

.hfheader {
	width: 100%;
	font-size: 3.0em;
}

.hffooter {
	width: 100%;
	font-size: 1.5em;
	font-style: italic;
}

.textalignleft {
	text-align: left;
}

.textaligncenter {
	text-align: center;
}
.textalignright {
	text-align: right;
}

.diagselected {
	background-color: red;
}

.xmarkbutton {
	/*alternatief voor float: right*/
	position: absolute;
	right: 0px;
	top: 0px;
}

@media print {
	.userinterface {
		display: none; /*niet zichtbaar en neemt geen plaats in*/
		visibility: hidden; /*niet zicht maar neemt nog wel plaats in*/
			/*We doen het allebei want visibilty: hidden is noodzakelijk omdat de toolbar display: flex heeft en dan om de een of andere reden display: none niet werkt*/
	}
	#pagegrid {
		top: 0px;
	}
}

:fullscreen, ::backdrop {
	/*
	Achtergrondkleur bij fullscreen (anders wordt deze zwart. Waarom???).
	(het pseudo-element ::backdrop als selector gebruiken is de correcte methode; de pseudo-class :fullscreen als selector is verouderd en werkt i.i.g. niet in FireFox.)
	*/
    background-color: lightgreen;
}

/*body:fullscreen heeft geen effect als je met F11 naar fullscreen gaat; alleen als dit gaat via een 'document.body.requestFullscreen()'-aanroep*/

body:fullscreen .hideinfullscreen {
	display: none;
}

body:fullscreen #pagegrid {
	top: 0px;
}