@import url('prism.css');

:root {
	--max-page-width: 120ch;
}

header, main, footer {
	padding-inline: clamp(1em, var(--max-page-width) / 2 - 40ch, 50vw);
}

main {
	max-width: 80ch;
	padding: var(--wa-space-xl);
	margin-inline: auto;
}

wa-icon {
	color: var(--wa-color-on-quiet);
	vertical-align: -.1em;
}

header {
	border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);

	h1 {
		font-size: var(--wa-font-size-l);
		line-height: 1;
	}

	nav {
		display: flex;
		align-items: center;

		a {
			text-decoration: none;
			color: var(--wa-color-text-normal);
			font-weight: var(--wa-font-weight-bold);
			color: var(--wa-color-on-quiet);
		}

		a:has(~ wa-divider) {
			font-size: var(--wa-font-size-m);

		}

		a:is(wa-divider ~ *) {
			font-size: var(--wa-font-size-xl);
		}
	}
}

aside {
	border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
}

footer {
	border-top: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
}