<nav id="swup" class="main-menu">
  <ul class="nav">
    <li class="nav-home1"><a class="" href="/"><svg fill="none" stroke-width="2" viewbox="0 0 24 24"
          stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em">
          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" id="home-svg1"></path>
          <polyline points="9 22 9 12 15 12 15 22" id="home-door-svg1"></polyline>
        </svg><span class="sr-only">Home button</span></a></li>
    <li class="nav-home2"><a class="" href="/"><svg fill="none" stroke-width="2" viewbox="0 0 24 24"
          stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em">
          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" id="home-svg2"></path>
          <polyline points="9 22 9 12 15 12 15 22" id="home-door-svg2"></polyline>
        </svg><span class="sr-only">House icon with dark background</span></a></li>
  </ul>
</nav>

/* Default theme */
body {
  background: #cccccc;
}

.nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  position: relative;
  right: 0;
}

li {
  display: block;
  margin: 0;
  padding: 10px;
  line-height: 1.6em;
}

a {
  text-decoration: underline;
  display: block;
  margin: 0;
  padding: 25px 30px;
  font-weight: 600;
  font-size: 2.5rem;
}

.nav-home1 {
  stroke: #8f8f8f;
}

.nav-home2 {
  stroke: #717171;
}

#home-svg1,
#home-svg2 {
  fill: #64b700;
}

#home-door-svg1,
#home-door-svg2 {
  fill: #b426ff;
}

.sr-only {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #333333;
  }

  .nav-home1 {
    stroke: #606060;
  }

  .nav-home2 {
    stroke: #7c7c7c;
  }
}