:root {

	--bg-col: #ffbfbf;
	--bg-shadow-col: var(--brick-ember-darker);
	--font-col: black;
	--h1-col: #002e39;
	--h2-col: #002e39;
	--hilight-bg-col: #0099c2;
	--link-frame-col: var(--bright-amber-darker);
	--off-bg-col: #ffffff;
	--a-col: #e50000;

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

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


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

@media (prefers-color-scheme: dark) {
	:root {
		--bg-col: #002e39;
		--bg-shadow-col: var(--brick-ember-darker);
		--font-col: #edcfcf;
		--h1-col: #0099c2;
		--h2-col: #0099c2;
		--hilight-bg-col: #592121;
		--link-frame-col: var(--brick-ember-lighter);
		--off-bg-col: #006d88;
		--a-col: #0099c2;
		.illustration {
			border: 3px solid var(--off-bg-col); 
		}

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

	}
}
#info {
	color: #592121;
	margin: 1em;
}


.purple-bg {
	background-color: #b973ff;
	color: black;
	padding: 0.1em;
}
.red-bg {
	background-color: #ff7b7b;
	color: black;
	padding: 0.1em;
}
.gold-bg {
	background-color: #d89800;
	color: black;
	padding: 0.1em;
}


header {
	background-color: #0099c2;
}


.illustration {
	background-color: #ffbfbf;
	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;
}


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

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: white;
}
#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;
}

.row6 {
	grid-row: 6;
}



.col1 {
	grid-column: 1;	
}

.col2 {
	grid-column: 2;
}

.col3 {
	grid-column: 3;
}

.col4 {
	grid-column: 4;
}

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