#iframe-anchor {
	display: block;
	margin: 3em 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-gray);
	background-color: var(--color-darker);
}


.suggested-flags {
	margin-top: 1em;
	margin-bottom: 1em;
	flex-wrap: nowrap;
	justify-content: center;
	overflow-x: auto;
	gap: 0.75em;
}
	.suggested-flags figure {
		font-size: 14px;
		margin: 0;
		cursor: pointer;
	}
		.suggested-flags img {
			min-width: 90px;
		}
		.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 40%);
			text-underline-offset: 0.15em;
		}
		.suggested-flags figure:hover figcaption {
			text-decoration-color: currentColor;
		}
	.suggested-flags figure:hover figcaption {
		text-decoration-color: color-mix(in srgb, currentColor, transparent 40%);
	}
	.suggested-flags figure:hover img {
		filter: none;
	}

.steps {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin-inline-start: 0;
	gap: 1.5em;
	font-size: 1.9em;
	line-height: 1.2;
}
	.steps-title {
		font-size: 4em;
		font-weight: 600;
	}
	.step {
		position: relative;
		margin-block-start: 3rem !important;
		margin-block-end: 0 !important;
		font-family: var(--font-narrow);
	}
		.step-number {
			color: var(--color-lighter);
			font-weight: 750;
		}
		.step > p {
			margin: 0;
			word-break: break-word;
			hyphens: auto;
		}
			.step > p span {
				text-decoration: underline;
				text-decoration-style: dashed;
				text-decoration-color: color-mix(in srgb, currentColor, transparent 30%);
				text-underline-offset: 0.1em;
				text-decoration-thickness: 2px;
				text-decoration-skip-ink: none;
				cursor: pointer;
				white-space: nowrap;
			}
				.step > p span:hover {
					text-decoration-color: color-mix(in srgb, currentColor, transparent 0%);
				}
				.step > p span.active {
					background-color: color-mix(in srgb, var(--color-blue), transparent 60%);
					text-decoration: none;
					cursor: default;
				}

@media (width < 1900px) {
	.suggested-flags {
		justify-content: flex-start;
		overflow-x: scroll;
	}
}

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

@media (width < 1200px) {
	.steps {
		display: flex;
		flex-direction: column;
		gap: 0 0.5em;
		font-size: 1.2em;
	}
		.steps-title {
			text-align: left;
			font-size: 3.3em;
		}
		.step {
			padding-left: 0;
			margin-block-start: 1em !important;
		}
			.step-number {
				color: var(--color-lighter);
			}
			.step > p {
				line-height: 1.3;
			}
}

@media (width < 600px) {

	.step > p span {
		text-decoration: none;
		background-color: color-mix(in srgb, currentColor, transparent 80%)
	}

	iframe {
		height: 80vh;
		box-shadow: 0 -100px 100px color-mix(in srgb, var(--color-blue), transparent 90%)
	}
	#iframe-anchor {
		margin-top: 1em;
	}

	.suggested-flags {
		padding-left: var(--page-padding);
		gap: 0.75em;
	}
}