:root {

	--bg-col: #d6ffec;
	--bg-shadow-col: #2741c8;
	--font-col: black;
	--h1-col: #2741c8;
	--h2-col: #2741c8;
	--hilight-bg-col: #0099c2;
	--link-frame-col: #00924f;
	--off-bg-col: #97a8fd;
	--a-col: #7c4400;
}

.illustration {
	border: 3px solid var(--off-bg-col); 
}

.info {
	color: #323545;
	margin: 1em;
}

.info-page {
	background-color: #ffffff;
}

em {
	background-color: #ffb04e;
	color: black;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg-col: #000000;
		--bg-shadow-col: #00924f;
		--font-col: #d6ffec;
		--h1-col: #00924f;
		--h2-col: #00924f;
		--hilight-bg-col: #592121;
		--link-frame-col: var(--brick-ember-lighter);
		--off-bg-col: #323545;
		--a-col: #ef8500;
		.illustration {
			border: 3px solid var(--off-bg-col); 
		}
	}
	.info-page {
		background-color: #000000;
		color: #ffffff;
	}
	em {
		background-color: var(--off-bg-col);
		color: white;
	}
}
#info {
	color: #592121;
	margin: 1em;
}

header {
	background-color: #00924f;
}


.illustration {
	background-color: #d6ffec;
	border-radius: 1em;
	padding: 1em;
	margin-bottom: 1em;
	margin-top: 1em;
}

.illustration-klein {
padding: 0.5em;
margin-bottom: 0.25em;
margin-top: 0.25em;
border-radius: 0.5em;	
}

.p-center{
	font-size: 120%;
}
ul {
	list-style-type: circle;
}

.hilight {
	border: 4px dashed var(--off-bg-col); 
	padding: 0.4em;
	border-radius: 0.5em;
	opacity: 0.9;
}


.notice {
	font-family:Atkinson-Hyperlegible;
	font-size: 60%;
}

input[type="text"] {
		font-family:monospace;
		font-size: 100%;
		background-color: var(--bg-col);
		text-align: center;
		padding: 0px;
		margin: 0.1em;
		border: 2px solid var(--font-col);
		color: var(--font-col);
		width: 1.2em;
		border-radius: 0.1em;
	}

input[type="text"].cwbox {
	font-family:Atkinson-Hyperlegible;
	font-size: 100%;
	height: 1.2em;
	width: 1.2em;
	
}


input[type="text"].correct {
	background-color: var(--off-bg-col);
}
input[type="text"].solution {
	border: 2px solid var(--h2-col);
}

@keyframes flipOnce {
	from {transform: rotateY(0deg);}
	to {transform: rotateY(360deg);}
}
input[type="text"].party {
	animation-name: flipOnce;
	animation-duration: 5s;
	background-color: var(--h2-col);
	border-color: var(--off-bg-col);
	color: white;
}

#div-kreuzwort {
	display: grid;
	grid-template-columns: 1em repeat(3, max-content) fit-content(100%);
}

.row1 {
	grid-row: 1;
}

.row2 {
	grid-row: 2;
}

.row3 {
	grid-row: 3;
}

.row4 {
	grid-row: 4;
}

.row5 {
	grid-row: 5;
}

.row6 {
	grid-row: 6;
}


.col1 {
	grid-column: 1;	
}

.col2 {
	grid-column: 2;
}

.col3 {
	grid-column: 3;
}

.col4 {
	grid-column: 4;
}
.col5 {
	grid-column: 5;
}


.crossrow {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 1.5em;
}
.caption {
		font-size: 100%;
		margin-top: 0.2em;
		text-align: right;
}

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

button {
	background-color: var(--bg-col);
	color: var(--a-col);
	display:block;
	margin-bottom: 2em;
	border: 2px solid;
	border-color: var(--bg-shadow-col);
	border-radius: 0.25em;
}

.hidden {
	display: none !important;
	background-color: var(--h2-col);
}


table {
	margin: auto;
	border-spacing: 0;
}

td, th {
	hyphens: none;
	padding: 0.25em;
}

label {
	display: flow;
}

.framed-box
{
	border: 3px solid;
	border-color: var(--off-bg-col);
	border-radius: 0.5em;
	padding: 0.5em;
	margin-bottom: 0.5em;
	margin-top: 0.5em;
}


.draw-bottom-border {
	border-bottom: 3px solid var(--off-bg-col);
	padding-bottom: 0.5em;
}

em {
	font-style: normal;
	hyphens: none;
}