/* @layer content-first { */

	html, body {
		min-height:100vh;
	}

	/* mtness content-first */
	body {
		display: flex;
		flex-flow: column;
	}
	body > h1     { order: 50; }
	body > aside  { order: 10; }
	body > header { order: 20; }
	body > main	  { order: 30; background-color: --var(--color-bg); z-index: 1; display: flex; flex-flow: column; flex: 1; }
	body > footer { order: 40; }

/* } */

/* @layer sticky { */

	/* mtness sticky header */
	#header {
		position:sticky;
		top:0;
		padding-block: 3rem;

		z-index: 2;
		transition: .1s padding ease-in-out;
	}

	/* second sticky */
	/*
	main > section.second-sticky {
		position:sticky;
		top:5rem;
		padding:1rem 0;
		background:#AEC;
	}
	 */

	body > aside {
		padding: 1rem;
		text-align: center;
		background-color: var(--color-bg);
	}

	main > section {
		/* padding:1rem 0; */
		/* background:#AEC; */
	}

	#footer {
		position:sticky;
		bottom: 0;
		padding:1rem;
		z-index: 0;
	}
	@media screen and (max-width: 60rem) {
		#footer {
			position:static;
		}
	}


	/* prefers-color-scheme: light */
	#header {background:#fff;}
	#content{background:#fff;}
	#footer {background:#eee;}
	#aside	{background:#ccc;}

	/*
	@media (prefers-color-scheme: dark) {
		html[data-theme="dark"] #header {background:#333;}
		html[data-theme="dark"] #footer {background:#000;}
		html[data-theme="dark"] #aside	{background:#444;}
	}
	 */
/* } */