.factoid {
	margin-top: 2em;
	font-size: 1.5em;
	line-height: 1.1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2em;
}
	.factoid b {
		color: var(--color-blue);
		font-variation-settings: "FLAR" 75;
		text-wrap: nowrap;
	}
	.factoid u {
		text-decoration-thickness: 0.2em;
		text-decoration-skip-ink: none;
		text-decoration-color: color-mix(in srgb, var(--color-blue), transparent 20%);
		text-underline-offset: -0.1em;
		text-wrap: nowrap;
	}		


.flag {
	background-image: url('/img/flag.webp');
	background-repeat: no-repeat;
	background-size: cover;
	background-position-x: center;
	height: 725px;
	display: flex;
	justify-content: center;
	align-items: center;
	filter: saturate(0.75);
	height: 600px;
	background-position-y: 100%;
}
	.flag h1 {
		margin-top: -1em;
		margin-bottom: 0.1em;
		font-size: 9em;
		line-height: 0.9;
		margin-bottom: 3rem;
		text-align: center;
		font-variation-settings: "FLAR" 50;
		margin-top: 0;
	}
	.flag button {
		background-color: white;
		border: none;
		border-radius: 1em;
		padding: 1em 2em;
		padding-bottom: calc(1em - 4px);
		font-size: 1.5em;
		margin: auto;
		display: block;
		cursor: pointer;
		font-weight: 500;
		box-shadow: 0 4px 0 color-mix(in srgb, var(--color-gray), transparent 50%);
		outline: 1px solid var(--color-grayish);
	}
		.flag button:hover {
			background-color: var(--color-lighter);
		}
		.flag button:active {
			position: relative;
			top: 1px;
			box-shadow: none;
		}

#iframe-anchor {
	display: block;
	margin: 5em auto;
	margin-bottom: 0;
	padding-top: 4vh;
}
iframe {
	margin: auto;
	width: 100%;
	height: 92vh;
	overflow: hidden;
	border-radius: 0.6em;
	outline: 1px solid var(--color-dark);
}


.suggested-flags {
	flex-wrap: nowrap;
	margin-top: 1em;
	overflow-x: auto;
}
	.suggested-flags b {
		width: min-content;
		margin-right: 1em;
		line-height: 1.1;
	}
	.suggested-flags figure {
		font-size: 0.65em;
		margin: 0;
		cursor: pointer;
	}
		.suggested-flags img {
			height: 4.5em;
			width: auto;
			filter: grayscale(0.2) saturate(0.8);
			min-width: 6.15em;
		}
		.suggested-flags figcaption {
			max-width: min-content;
			min-width: 100%;
			line-height: 1.2;
			margin-top: 0.25em;
			word-break: break-word;
			hyphens: auto;
			text-decoration: underline;
			text-decoration-style: dashed;
			text-decoration-color: color-mix(in srgb, currentColor, transparent 60%);
			text-underline-offset: 0.15em;
		}

	.suggested-flags figure:hover figcaption {
		text-decoration-color: color-mix(in srgb, currentColor, transparent 40%);
	}
	.suggested-flags figure:hover img {
		filter: none;
	}


.printer {
	height: 1059px;
	background-image: url('/img/printer.webp');
	background-repeat: no-repeat;
	background-position-x: center;
	margin: 10em 0;
	position: relative;
}
	.printer-content {
		position: absolute;
		max-width: 1360px;
		padding: 4em 2em;
		top: 400px;
		left: 0;
		right: 0;
		margin: auto;
	}
		.printer-content h2 {
			font-size: 4.5em;
			font-weight: 800;
			margin-top: 0;
			margin-bottom: 0.2em;
			text-align: center;
			line-height: 1;
		}
		.printer-content h3 {
			margin-top: 1em;
		}
	.printer-row {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: 3.5em;
	}
	.printer-col span {
		color: var(--color-blue);
		font-weight: 500;
	}

.portfolio {
	margin-top: 2em;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5em;
}
	.portfolio-item img {
		cursor: zoom-in;
		aspect-ratio: 1/1;
	}
		.portfolio-item img:hover {
			filter: contrast(1.08);
		}

	.portfolio-center {
		text-align: center;
		align-content: center;
		font-size: 4em;
		line-height: 1.1;
		background-color: color-mix(in srgb, var(--color-blue), transparent 85%);
		text-underline-offset: 0.1em;
		text-decoration-thickness: 2px;
		font-weight: 600;
	}
		.portfolio-center:hover {
			background-color: color-mix(in srgb, var(--color-blue), transparent 83%);
		}		

	dialog::backdrop,
	dialog::-webkit-backdrop {
		background-color: #000a;
		cursor: pointer;
	}
	.portfolio dialog {
		padding: 0;
		border: none;
		outline: none !important;
		border-radius: 0.3rem;
		animation: popup 0.08s ease-out;
	}
	.portfolio dialog img {
		max-height: calc(100vh - 3em);
		cursor: zoom-out;
	}

footer.container {
	border-top: 1px solid var(--color-gray);
	margin-top: 5em;
	padding-top: 2em;
	padding-bottom: 1em;
}

@keyframes popup {
	0% {
		opacity: 0.4;
		transform: scale(0.98);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@media (width < 1400px) {
	iframe {
		width: 100%;
  		border-radius: 0;
		outline: none;
		border-top: 1px solid var(--color-dark);
		margin-top: -1px;
	}
}

@media (width < 600px) {
	.flag h1 {
		font-size: 7.5em;
		margin-bottom: 4rem;
	}
	.flag button {
		font-size: 1.3em;
		width: 100%;
	}

	#iframe-anchor {
		margin-top: 0;
	}

	.factoid {
		font-size: 1.5em;
	}

	.printer {
		height: fit-content;
		background-size: 290%;
		background-position-x: 1%;
		margin-top: 5em;
	}
		.printer-content {
			position: static;
			backdrop-filter: blur(5px) brightness(0.6);
			padding: 3.5em var(--page-padding);
		}
		.printer h2 {
			font-size: 13.3vw;
			text-align: left;
		}
		.printer-row {
			grid-template-columns: 1fr;
		}

	.portfolio {
		grid-template-columns: repeat(2, 1fr);
	}
		.portfolio-center {
			display: none;
		}
}