html, body {

    height: 110%;
    width: 100%;
	color: var(--accent-color);
	background-color: var(--background-color);
	text-align: center;	margin: .1em auto;	 	
	font: normal 0.9em Arial, sans-serif;  /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
}

p {
	font-size: 0.8em;
}

:root {
  --background-color: #fff;	
  --background2-color: #ddd;	
  --accent-color: #000;
  --accent2-color: #999;
}

:root.dark {
  --background-color: #000;	
  --background2-color: #333;
  --accent-color: #bbb;
  --accent2-color: #555;		
}

.tagnachtmodus {
	position: relative;
	text-align: center;	margin: .1em auto;	 
    height: 2.5em;
    width: 18em;
	border: 0px solid var(--background2-color); 
/*	background-color: #f00; */
}

/* toggle-button für Dark Mode */
.toggle label {
	position: relative;
	display: inline-block;
	width: 13.0em;
	height: 1.0em;
	top: 0.0em;
	padding: 0.4em;
	color: var(--accent-color);
}

.toggle input {
	display: none;
}

.toggle .schieber {
	/* Grundfläche */
	position: absolute;
	cursor: pointer;
	top: 0.4em;
	left: 0.5em;
	width: 2em;
	height: 1em;
	background-color: var(--accent-color); /* dunkel */
	border-radius: 1em;
}

.toggle .schieber:before {
	/* verschiebbarer Button */
	position: absolute;
	content:'';
    background: var(--accent2-color);
    background-size: 1em 1em;
    background-repeat: no-repeat;
    height: 1.0em;
    width: 1.0em;
	left: 1.1em;
	bottom: 0.0em;
	border-radius: 50%;
	transition: all 0.5s ease-in-out;
}

.toggle input:checked + .schieber {
	background-color: #444;	/* für Tag Modus */
}
.toggle input:checked + .schieber:before {
	transform: translateX(-1.1em); /* Position Schieberknopf */
}

.text .schieber:after {
	/* Design FlipFlop-Schalter */
	position: absolute;
	content: "dunkel";
	color: transparent;
	font-weight: bold;
	height: 1.6em;
	left: -3.5em;
	bottom: 0.2em;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.tic-tac-toe {
	text-align: center;	margin: .1em auto;	 
	border: 12px solid black;  
	width: 70vmin;
	height: 78vmin;
	background-color: var(--background2-color); 
	font-size: 1.70em; 
}
	
.tic-tac-toe #gameboard {
	text-align: center;	margin: .1em auto;	  
	width: 60vmin;
	height: 60vmin;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border: 5px solid black;
}

.tic-tac-toe button {
	width: 20vmin;
	height: 20vmin;
	background-color: var(--background-color);
	border: 2px solid var(--accent-color);
	margin: 0;
	font: 0/0 transparent;
}

.tic-tac-toe [aria-label="X"] {
	background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%3E%3Cline%20x1%3D%220.1%22%20y1%3D%220.1%22%20x2%3D%220.9%22%20y2%3D%220.9%22%20stroke-width%3D%220.1%22%20stroke%3D%22red%22%2F%3E%3Cline%20x1%3D%220.1%22%20y1%3D%220.9%22%20x2%3D%220.9%22%20y2%3D%220.1%22%20stroke-width%3D%220.1%22%20stroke%3D%22red%22%2F%3E%3C%2Fsvg%3E');
}

.tic-tac-toe [aria-label="O"] {
	background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%3E%3Ccircle%20cx%3D%220.5%22%20cy%3D%220.5%22%20r%3D%220.4%22%20fill%3D%22none%22%20stroke-width%3D%220.1%22%20stroke%3D%22blue%22%2F%3E%3C%2Fsvg%3E');
}

/* ======================================================================================================== */