/* @layer content-first { */

	html, body {
		scroll-padding-top: 6rem;
		min-height:100%;
	}

	/* mtness content-first */
	body {
		display: flex;
		flex-flow: column;
		min-height: 100vh;
	}
	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 {
		/*position: sticky;*/
		/*top: 6rem;*/
		/* padding:1rem 0; */
		/* background:#AEC; */
	}

	main > section + section {
		margin-top: 2rem;
	}

	.content > *:first-child {
		margin-top: 3rem;
	}
	.content > *:last-child {
		margin-bottom: 3rem;
	}

	#footer {
		/* position:sticky; */
		position:static;
		bottom:0;
		padding:1rem;
		z-index: 0;
	}

	/* 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;}
	}
	 */
/* } */