.topnav>ul,
.topnav-tx>ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(auto, 15vw));
}

.heel>ul,
.heel-tx>ul {
  display: grid;
  grid-template-columns: repeat(2, 30vw) repeat(2, 1fr);
}

.footer>ul,
.footer-tx>ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10vw, 1fr));
}

.topnav>ul,
.topnav-tx>ul,
.heel>ul,
.heel-tx>ul,
.footer>ul,
.footer-tx>ul {
  justify-content: center;
  column-gap: 1vw;
  row-gap: 1.5vw;
  list-style-type: none;
}

.topnav>ul>li,
.topnav-tx>ul>li {
  min-height: 15vh;
}

.heel>ul>li,
.heel-tx>ul>li {
  min-height: 10vh;
}

.topnav>ul>li,
.heel>ul>li,
.footer>ul>li,
.topnav-tx>ul>li,
.heel-tx>ul>li,
.footer-tx>ul>li,
.topnav>ul>li>a,
.heel>ul>li>a,
.footer>ul>li>a,
.topnav-tx>ul>li>a,
.heel-tx>ul>li>a,
.footer-tx>ul>li>a {
  font-family: var(--font-header);
  font-style: italic;
  font-size: 3.5vmin;
  text-align: center;
  padding: 0.25vh 0.25vw;
  text-decoration: none;
}

.topnav>ul>li,
.heel>ul>li,
.footer>ul>li,
.topnav-tx>ul>li,
.heel-tx>ul>li,
.footer-tx>ul>li {
  background-color: transparent;
  outline: thick ridge var(--oldgold);
  border-style: ridge;
  align-content: center;
}

.topnav>ul>li,
.heel>ul>li,
.footer>ul>li {
  border-color: var(--midnightblue);
  color: var(--midnightblue);
}

.topnav-tx>ul>li,
.heel-tx>ul>li,
.footer-tx>ul>li {
  border-color: var(--bluebonnet);
  color: wheat;
}

.topnav>ul>li>a,
.heel>ul>li>a,
.footer>ul>li>a {
  align-self: center;
  color: var(--midnightblue);
  /* Do not use color: inherit here; breaks hover contrast with li background on :hover */

}

.topnav-tx>ul>li>a,
.heel-tx>ul>li>a,
.footer-tx>ul>li>a {
  align-self: center;
  /* Do not use color: inherit here; breaks hover contrast with li background on :hover */

  color: wheat;
}

.topnav>ul>li:hover,
.heel>ul>li:hover,
.footer>ul>li:hover {
  background-color: var(--midnightblue);
  /* Do not use color: inherit here; breaks hover contrast with li background on :hover */
  padding: 0.25vh 0.25vw;
}

.topnav-tx>ul>li:hover,
.heel-tx>ul>li:hover,
.footer-tx>ul>li:hover {
  background-color: wheat;
  padding: 0.25vh 0.25vw;
  /* Do not use color: inherit here; breaks hover contrast with li background on :hover */

}

.topnav>ul>li>a:hover,
.heel>ul>li>a:hover,
.footer>ul>li>a:hover {
  color: wheat;
  /* Do not use color: inherit here; breaks hover contrast with li background on :hover */

}

.topnav-tx>ul>li>a:hover,
.heel-tx>ul>li>a:hover,
.footer-tx>ul>li>a:hover {
  color: var(--bluebonnet);
  /* Do not use color: inherit here; breaks hover contrast with li background on :hover */

}

.orgs a,
.cmnt a,
.cmnt2 a,
h2 a,
h3 a {
  color: darkturquoise;
  text-decoration: underline;
  text-shadow: 1px 1px 2px var(--midnightblue);
}

.org-tx a {
  color: var(--bluebonnet);
  text-decoration: underline;
  text-shadow: 1px 1px 2px var(--midnightblue);
}

.txt>ol>li>ul>li>ul>li a,
.txt a {
  color: var(--epgreen);
  text-decoration: underline;
  font-weight: bold;
}

.body-ep>.wrap2>.topnav,
.body-ep>.wrap2>.heel {
  background: url('../images/mosaictile.png') repeat;
}

.nav {
  justify-content: right;
  color: var(--sunset1);
  padding-right: 0.5rem;
}

.nav a {
  color: var(--sunrise2);
  font-family: var(--font-header);
  font-size: 2.5vmin;
  font-weight: bold;
  background-color: var(--sunset1);
  cursor: pointer;
  text-decoration: none;
  outline: thin solid var(--oldgold);
}

.nav a:hover {
  color: var(--sunrise3);
  background-color: var(--redclay);
  text-decoration: underline
}