html, body {
	height: 100%;
	margin: 0px;
	padding: 0px;
}

#website-container {
	height: 100%;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	background-color: #FFDC9A;
}

.kachel-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	
	padding: 10px;
}

.kachel-zeile {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.kachel {
	position:relative;
	height: 180px;
	width: 180px;
	
	background-color: white;
	transition: transform .2s;
	
	z-index: 0;
}
.kachel:hover {
	-ms-transform: scale(1.2); /* IE 9 */
	-webkit-transform: scale(1.2); /* Safari 3-8 */
	transform: scale(1.2);
	z-index: 100;
}
.kachel img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	filter: grayscale(100%) contrast(1);
	mix-blend-mode: multiply;
}
.kachel.overlay::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(25, 37, 80);
	opacity: 100%;
	mix-blend-mode: lighten;
	pointer-events: none; /* Ensure it doesn't block interactions */
}

h3 {
	margin: 20px;
}

.farbe-tuerkis {
	background-color: cyan;
}
.farbe-gruen {
	background-color: green;
}
.farbe-orange {
	background-color: #ff8f00;
}
.farbe-violett {
	background-color: violet;
}
.farbe-gelb {
	background-color: yellow;
}
.farbe-blau {
	background-color: blue;
}
.farbe-weiss {
	background-color: white;
}
.farbe-rot {
	background-color: red;
}
.farbe-magenta {
	background-color: magenta;
}
.farbe-indigo {
	background-color: #324191;
}
.farbe-schwarz {
	background-color: #000000;
}

.farbe-text-weiss {
	color: white;
}
.farbe-text-schwarz {
	color:black;
}

.image-fade-in::after {
	transition: transform .2s;
	background: image("bilder/toskana/dystopian_orange_sun.png");
	opacity: 0%;
}
.image-fade-in::after:hover {
	transition: transform .2s;
	opacity: 100%;
}