@media (max-width: 800px) {
  nav .navlinks,
  nav .links {
    width: 100%;
    padding: 6px 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  nav .navlinks:before,
  nav .links:before {
    display: none;
  }

  nav .navlinks a,
  nav .links a {
    position: relative;
    margin: 0;
    padding: 10px 13px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    transition: color .18s, box-shadow .18s, padding-left .18s;
  }

  nav .navlinks a:last-child,
  nav .links a:last-child {
    border-bottom: 0;
  }

  nav .navlinks a:hover,
  nav .links a:hover,
  nav .navlinks a:focus-visible,
  nav .links a:focus-visible {
    padding-left: 18px;
    color: var(--cyan);
    background: transparent;
    box-shadow: inset 2px 0 var(--cyan);
    outline: none;
    transform: none;
  }

  html[data-theme="light"] nav .navlinks,
  html[data-theme="light"] nav .links {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  html[data-theme="light"] nav .navlinks a,
  html[data-theme="light"] nav .links a {
    color: #40566e;
    background: transparent;
  }

  html[data-theme="light"] nav .navlinks a:hover,
  html[data-theme="light"] nav .links a:hover,
  html[data-theme="light"] nav .navlinks a:focus-visible,
  html[data-theme="light"] nav .links a:focus-visible {
    color: #075f58;
    background: transparent;
    box-shadow: inset 2px 0 #087f75;
  }
}