#navigation {
	display: block;
	max-content: flex;
	height: auto;
	margin-top: 0.5em;
	padding: 0.5em;
	overflow: hidden;
	z-index: 10000;
}
nav > ul {
  list-style:none;	 
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  position:relative;
} 

nav li {
  margin: 0.5em;
  padding: 0;
  font-size: 1em;  
  flex: 1 1 0%;  
  position: relative;
}

@media (min-width: 45em) {
  nav > ul {	
    flex-direction: row; 
	height: 1em; 
  }
  nav li {
    flex: 1;
		flex-basis: 10em;
    flex-grow: 0;
    flex-shrink: 0;		
		font-size: 1em;
  }  
}

nav a {
  display: block;
  padding: 0.4em;
  text-decoration: none;
  font-size: 1.2em; 
  font-weight: bold;
  text-align: center;
  border: thin solid var(--background-color);
  border-radius: 0.5em;
  color: var(--link-color);
  --link-color: gold; 
  background-color: var(--background-color); 
  transition: all .25s ease-in;	 
  position: relative; 
  z-index: 10000; 
}

nav li[aria-current] a {
  background-color: var(--accent2-color); 
  color: var(--accent1-color);
}
	
nav a:focus,
/*nav a:hover,*/
nav li[aria-current] a:focus,
nav li[aria-current] a:hover {    
  color: var(--background-color); 
  background-color: var(--accent1-color);
}	
 
/**     Show the submenu on hover, focus     **/
nav li:hover  .submenu,
nav li:active  .submenu, 
nav li:focus  .submenu { 
  visibility: visible;
  height: auto;
}
/*     submenu navigation links      */
nav ul ul { 
  visibility: hidden;  
  height: 0;
  z-index: 1000; 
}
nav ul li { 
  display: block; 
  /* width: 15em; */
}
 
/**     Show the submenu on hover, focus     **/

nav li:hover > ul {
  visibility: visible;
  height: auto;
}
nav li:focus-within > ul,
.visible  { 
  visibility: visible;
  height: auto;
}
[aria-expanded] {
position: absolute;
right: 0.5em;
top: 0.25em;
width: 2em;
height: 2em;
padding: 0;
color: var(--accent1-color);
background: var(--background-color);  
outline:transparent;
border: thin solid var(--background-color);
border-radius: 0.3em;
}

[aria-expanded] svg {
	pointer-events: none;
 	fill: var(--accent1-color);
	border-radius: 0.3em;	
	z-index:10;
}
/*
nav li:hover [aria-expanded] svg {
	background: var(--accent1-color);
	fill: var(--background-color);*/
}

nav li:focus [aria-expanded] svg {
	background: var(--background-color);
  	fill: var(--accent1-color);
}

[aria-expanded]:focus svg,
[aria-expanded]:hover svg{
  	fill: var(--background-color);
	background: var(--accent1-color);
 
}

[aria-expanded=true] svg {
  transform: translate(0,0) rotate(90deg);
}

.visually-hidden, 
[visually-hidden=true] {
	position: absolute !important;
	clip-path: rect(1px, 1px, 1px, 1px) !important;
	padding: 0 !important;
	border: 0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden !important;
}

	
:root {
	--background-color: darkgrey;
	--accent1-color: black;
	--accent2-color: darkred;	
	--text-color: black;
}
kbd {
	background: #f9f9f9 linear-gradient(to bottom, #eee, #f9f9f9, #eee) repeat scroll 0 0;
	border: thin solid #aaa;
	border-radius: 2px;
	box-shadow: 1px 2px 2px #ddd;
	font-family: inherit;
	font-size: 0.9em;
	padding: 0 0.5em;
}
	const stylesheet = document.createElement('style');
	stylesheet.textContent = cssRules;
	document.querySelector('html > head').appendChild(stylesheet);		


});