/* header nav */
[role=banner] nav > ul { display:flex; }
[role=banner] nav > ul > li { flex:1 1 auto; }
[role=banner] nav > ul > li > a { text-align:center; }
[role=banner] nav ul { padding:0; }
[role=banner] nav li { position:relative; }
[role=banner] nav a {
	padding:.3em .6em;
	display:block;
}
[role=banner] nav li > ul {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;
	min-width: 100%;
	white-space:nowrap;
	transition-duration:.4s;
	visibility:hidden;
	opacity:0;
}
[role=banner] nav li:hover > ul ,
[role=banner] nav li:focus-within > ul {
	visibility:visible;
    opacity:1;
}

/* customize */
[role=banner] nav li > ul {
	background-color:var(--color-area);
	color:var(--color-text);
	-webkit-backdrop-filter:blur(3px);
	backdrop-filter:blur(3px);
}

[role=banner] nav li > ul a[aria-current=page],
[role=banner] nav li > ul a:hover,
[role=banner] nav li > ul a:focus-within {
	background-color:var(--color);
	color:var(--color-bg);
}



/* footer
[role=contentinfo] {
	background-color:var(--color-dark);
	color:var(--color-bg);
	padding-top:2em;
	padding-bottom:2em;
}
[role=contentinfo] a {
	color:inherit;
}
*/