:root {

	--bg-col: #b0dbff;
	--bg-shadow-col: var(--ink-black-lighter);
	--font-col: #000000;
	--h1-col: #ff52ae;
	--h2-col: #ff52ae;
	--hilight-bg-col: var(--brick-pink-lighter);
	--link-frame-col: var(--brick-pink);
	--off-bg-col: #2aa0ff;
	--a-col: var(--dodger-blue-darker-darker);


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

@media (prefers-color-scheme: dark) {
	:root {
	--bg-col: var(--ink-black);
	--bg-shadow-col: #b0dbff;
	--font-col: #b0dbff;
	--h1-col: #ff52ae;
	--h2-col: #ff52ae;
	--hilight-bg-col: var(--brick-ember-darker);
	--link-frame-col: var(--brick-pink);
	--off-bg-col: #005ca6;
	--a-col: var(--brick-pink-lighter);
.illustration {
	border: 3px solid var(--off-bg-col); 
}

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

#info {
	color: var(--ink-black);
}
/*hintergrundfarbe rechenzentrum 8cacc5 */

#rechenzentrum {
	background-color: #8cacc5;
}
header {
	background-color: #87c9ff;
}


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

.illustration-breit {
	
}

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

.hilight {
	border: 3px solid var(--off-bg-col); 
	padding: 0.4em;
	border-radius: 0.5em;
}



/* Für das Kreuzworträtsel */

input[type="text"] {
		font-size: 100%;
		width: 1.2em;
		height: 1.2em;
		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);
	}
input[type="text"].correct {
	background-color: var(--off-bg-col);
}
input[type="text"].cloud {
	/*border: 2px solid var(--off-bg-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: 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);
}