/* menu.css */
:root {
  --nav-bg: #222;
  --nav-link: #fff;
  --nav-link-active: #ffd700;
  --menu-border: #333;
}
body.dark {
  --nav-bg: #111;
  --nav-link: #fff;
  --nav-link-active: #ffd700;
  --menu-border: #444;
}
nav.x4v-menu {
  background: var(--nav-bg);
  padding: 1em 0 1em 0;
  margin-bottom: 2em;
  text-align: center;
  border-bottom: 1px solid var(--menu-border);
  position: relative;
}
nav.x4v-menu::after {
  content: "";
  display: table;
  clear: both;
}
nav.x4v-menu a {
  color: var(--nav-link);
  margin: 0 1em;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.2s;
}
nav.x4v-menu a.active {
  color: var(--nav-link-active);
}
#darkmode-toggle {
  float: right;
  margin-right: 2em;
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
  color: var(--nav-link);
}
#signin-btn {
  float: right;
  margin-right: 1em;
  background: #444;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.3em 1em;
  font-size: 1em;
  cursor: pointer;
}
#signin-status {
  float: right;
  margin-right: 1em;
  font-weight: bold;
  color: var(--nav-link-active);
}
@media (max-width: 600px) {
  #darkmode-toggle, #signin-btn, #signin-status {
    float: none;
    display: block;
    margin: 0.5em auto;
  }
}