/* @layer content-first { */

html {
	text-size-adjust: none;
}

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

/* deathshadow reset */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dt,dd,
table,tr,td,th,p,img,figure,figcaption{
	margin:0;
	padding:0;
}
img, fieldset {
	 border:none;
}
*,
*:after,
*:before {
	box-sizing:border-box;
}

/* mtness content-first */
body {
	display: flex;
	flex-flow: column;
	min-height: 100vh;
}
body > h1     { order: 25; }
body > aside  { order: 10; }
body > header { order: 20; }
body > #hero  { order: 25; }
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; */
}

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