#mainNav {
  order: 2;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  --navFontSize: clamp(1.2rem, 1rem + 2vh, 2.5rem);
  --maxTextSize: clamp(1.4rem, 1.2rem + 2.5vh, 2.7rem);
  --navListPadding: 5px;
  height: calc(var(--maxTextSize) + var(--navListPadding) * 2 + var(--focusSize));
  z-index: 9;
  padding: 0 20px 0 0;
}

#mainNavList {
  order: 2;
  width: fit-content;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

#mainNavList li {
  padding: var(--focusSize) 0;
  box-sizing: border-box;
}

#mainNavList li a {
  font-size: var(--navFontSize);
  font-family: 'Times New Roman', Times, serif;
  text-decoration: none;
  color: #838383;
  /*border-left: #838383 solid 1px;*/
  padding: 5px;
  height: 100%;
  transition: color .2s, font-size .2s;
}

#mainNavList li a:hover {
  color: rgb(185, 185, 185)
}

.navZoom:hover {
  font-size: var(--maxTextSize) !important;
}

#mainNavList li a:active {
  /*font-size: var(--navFontSize);*/
  color: rgb(227, 227, 227);
}

#mainNavList li a:focus-visible {
  outline: none;
  font-size: var(--maxTextSize);
  color: rgb(185, 185, 185);
}

#mainNavList li:has(:focus-visible) {
  border: var(--focusStyle);
}