:root {

	--bg-col: #fffba4;
	--bg-shadow-col: var(--brick-ember);
	--font-col: black;
	--h1-col: #e2431b;
	--h2-col: #e2431b;
	--hilight-bg-col: var(--bright-amber-lighter);
	--link-frame-col: var(--bright-amber-darker);
	--off-bg-col: #e48617;
	--a-col: var(--brick-ember);

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


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

@media (prefers-color-scheme: dark) {
	:root {
	--bg-col: #481508;
	--bg-shadow-col: var(--bright-amber-darker);
	--font-col: #fffba4;
	--h1-col: #e48617;
	--h2-col: #e48617;
	--hilight-bg-col: var(--brick-ember-darker);
	--link-frame-col: var(--brick-ember-lighter);
	--off-bg-col: #13121a;
	--a-col: var(--bright-amber-lighter);
.illustration {
	border: 3px solid var(--off-bg-col); 
}

.info-page {
	background-color: #000000;
	color: #ffffff;
}
	
	}
}
.info {
	color: #481508;
	margin: 1em;
}
/*hintergrundfarbe rechenzentrum 8cacc5 */

header {
	background-color: #fff744;
}


.illustration {
	background-color: #fffba4;
	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: 0; 
	padding: 0.4em;
	border-radius: 0.5em;
	background-color: var(--off-bg-col);
	opacity: 0.9;
}




input[type="text"] {
		font-family:monospace;
		font-size: 100%;
		padding-top: 0.2em;
		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;
	
}


::placeholder {
	color: var(--a-col);
}

input[type="text"].correct {
	background-color: var(--off-bg-col);
}
input[type="text"].solution {
	/*border: 2px solid var(--off-bg-col);*/
}
input[type="text"].example {
	background-color: var(--hilight-bg-col);
	width: 90%;
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
}

select {
 width:70%;
	font-size: 100%;
	font-family: monospace;
	background-color: var(--hilight-bg-col);
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
	margin: 0.1em;
	border: 2px solid var(--font-col);
	color: var(--text-col);
	border-color: var(--link-frame-col);
	border-radius: 0.25em;
	
}
select:hover, select:focus {
	background-color: var(--off-bg-col);
}
select[disabled] {
	border-color: grey;
	color: grey;
}
select[disabled]:hover, select[disabled]:focus {
	background-color: var(--hilight-bg-col);	
}

textarea {
	font-size: 100%;
	border: 2px solid var(--font-col);
	color: var(--font-col);
	width: 95%;
	background-color: var(--hilight-bg-col);
 text-align: left;
	padding: 5px;
	hyphens: none;
	border-radius: 0.1em;
}


@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: black;
}
#div-kreuzwort {
	display: grid;
	grid-template-columns: 1em 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;
}


.col1 {
	grid-column: 1;	

}

.col2 {
	grid-column: 2;
}

.col3 {
	grid-column: 3;
}

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

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 {
	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;
}