:root {
	--border: 1px solid #000000;
	--radius: 2px;
	
	--maincolor: transparent;
	--rowcolor: transparent;
	--divcolor: rgba(255, 255, 255, 0.6);
	
	--columngap: 3px;
	--rowgap: 3px;
}

header {
    background-color: var(--divcolor);
    height: 50px;
    width: 600px;
    margin: auto;
    margin-top: 20vh;
	padding: 10px;
	
	border-radius: var(--radius);
	
	font-size: 20px;
	box-sizing: border-box;
	border: var(--border);
        
        font-family: 'special elite' , monospace , serif;
}


nav a, strong {
	color: #8ac3a4;
}

a:active {
	color: #2dfcb6;
	text-decoration: wavy underline;
}

/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */


nav ul {
  margin: 0 -5px;
  padding: 0;
  list-style: none;
  user-select: none;
}

nav ul li {
  margin-bottom: 0;
 display: flex;
}

nav > ul li > a,
nav > ul li > strong {
  display: inline-block;
}

nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
  padding: 5px 10px;
}


nav > ul li > a.active,
nav > ul li > details.active summary {
  font-weight: bold;
}

nav ul summary {
  cursor: pointer;
}

nav ul ul li > a {
  padding-left: 30px;
}

a, strong {
	text-decoration: none;
	font-size: 30px;
}

header nav {
  margin-bottom: 0;
	text-decoration: none;
	justify-content: space-evenly;
	display: flex;
	flex-direction: row;
}


header nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

header nav ul li {
  position: relative;
	display: flex;
}

header nav ul li:first-child > a {
  padding-left: 0;
}

header nav ul li:last-child > a {
  padding-right: 0;
}

/* Subnavigation (Drop-Down): */

header nav ul ul {
	background-color: white;
  display: none;
  position: absolute;
  top: 100%;
  left: 10px;
  padding: 0.5em;
  z-index: 1;
  min-width: 100%;
  box-shadow: 0 1px 5px rgba(0,0,0,0.2);
}

header nav ul li:hover ul,
header nav ul li:focus-within ul {
  display: block;
}

header nav ul li strong {
  font-weight: normal;
}


header nav ul ul li a {
  display: block;
  padding-left: 0;
  padding-right: 0;

}

a:hover {
	text-shadow: 1px 1px 4px #00ffb1;
  background-color: inherit;
  color: #00a472;
    font-style: italic;
}

nav a {
	color: #8ac3a4;
}

mark {
	text-shadow: 1px 1px 4px #00ffb1;
  background-color: inherit;
  color: #00a472;
}