.nav {
  background-color: white;
  overflow: hidden;
}
nav a {
	display: block;
	padding: 0;
	text-decoration: none;
	font-weight: bold;
	border: thin solid var(--background-color);
	border-radius: .1em;
	border-color: white;
	color: var(--accent1-color);
	background-color: var(--background-color);
	transition: all .25s ease-in;
}
nav ul {
  display: flex;
  font-size: 12pt;
  /* flex-direction: column; */
} 

nav li {
  list-style: none;
  margin: 0.1em;
  padding: 0;
  font-size: 0.7em; 
 text-align: left;  
}

nav a:focus,
nav a:hover,
nav a:active {
	color: var(--background-color);
	background-color: var(--accent1-color);
}

:root {
	--background-color: white;
	--accent1-color: darkred;
	--text-color: black;
}

@media (min-width: 480px) {
  nav ul {	
    flex-direction: row; 
	font-size: 13pt;
  }
  nav li {
    font-size: 12pt;
  }  
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}