:root {
	color-scheme: light dark;

}
:root:has(.flag.active) {
	with: 100vw !important;
	height: 100vh !important;
	overflow: hidden;
}
div.flag {
	container-type: size;
	overflow: hidden;
	&:not(.active) {
		max-width: var(--max-width);
		aspect-ratio: 3/2;
		margin: auto;
	}
	&.active {
		height: 100vh;
		width: 100%;
		z-index: 10000;
		position: absolute;
		top: 0;
		left: 0;
	}
}
div.symbol {
	font-size: 80cqmin;
	color: white;
	-webkit-text-stroke: black 0.02em;
	height: 100%;
	width: 100%;
	text-align: center;
	align-content: center;
}
.trans {
	div.symbol::before {content: "⚧";}
		background-image: linear-gradient(
			#5BCEFA calc(0 * 100% / 5) calc(1 * 100% / 5),
			#F5A9B8 calc(1 * 100% / 5) calc(2 * 100% / 5),
			#ffffff calc(2 * 100% / 5) calc(3 * 100% / 5),
			#F5A9B8 calc(3 * 100% / 5) calc(4 * 100% / 5),
			#5BCEFA calc(4 * 100% / 5) calc(5 * 100% / 5));
}
.lesbian {
	div.symbol::before {content: "⚢";}
		background-image: linear-gradient(
			#d42c00 calc(0 * 100% / 5) calc(1 * 100% / 5),
			#fd9855 calc(1 * 100% / 5) calc(2 * 100% / 5),
			#ffffff calc(2 * 100% / 5) calc(3 * 100% / 5),
			#d161a2 calc(3 * 100% / 5) calc(4 * 100% / 5),
			#a20161 calc(4 * 100% / 5) calc(5 * 100% / 5));
}
.rainbow {
		background-image: linear-gradient(
			#770088 calc(0 * 100% / 6) calc(1 * 100% / 6),
			#004CFF calc(1 * 100% / 6) calc(2 * 100% / 6),
			#028121 calc(2 * 100% / 6) calc(3 * 100% / 6),
			#FFEE00 calc(3 * 100% / 6) calc(4 * 100% / 6),
			#FF8D00 calc(4 * 100% / 6) calc(5 * 100% / 6),
			#E50000 calc(5 * 100% / 6) calc(6 * 100% / 6));
}
.hidden {
	display: none;
}
span.flag-preview {
	display: inline-block;
	vertical-align: text-bottom;
	width: 1.5em;
	height: 1.1em;
	margin: 0 0.1em;
}