/* button_bar.css
   This style sheet manages the navigation menu. On large screens
   this is the links down the left side. On small screens it is the
   hamburger icon and the menu it raises.
*/
/* <nav> appears in index.htm and surrounds the left menu */
nav {
  display: flex;
  flex-direction: column;
  font-size: 18px;
}
@media (min-width: 768px) { /* large screens */
  nav {
    flex-shrink: 0;
	align-self: stretch; /* ensure it fills parent's height */
  }
}
nav a { /* <a href=...> links in <nav> space */
  width: 90%;
  text-decoration: none;
  padding: 0.75em;
  display: block;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  transition: background-color 0.3s ease;
  margin: 0.2em auto; /* "auto" means "center" */
  text-align: center;
  word-break: break-word;
  white-space: normal;
}
nav a:hover {
  background-color: rgba(255, 255, 255, 0.4);
  color: yellow;
}
/* class=menu is applied to button_bar.htm's <ul> */
.menu {
  display: none;
  flex-direction: column;
  padding: 1em;
  margin: 0;
  list-style: none;
  color: white;
}
@media (min-width: 768px) { /* large screens */
  .menu {
    display: flex;
  }
}
.menu.show {
  display: flex;
}
@media (min-width: 768px) { /* large screens */
  .menu {
    display: flex !important; /* Ensure menu is shown on desktop */
  }
}