#site-navigation {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(90vw, 380px);
  max-height: 90dvh;
  padding: 24px;
  border: 1px solid #555;
  border-radius: 6px;
  background: #080808;
  color: #fff;
  overflow-y: auto;
}
#site-navigation::backdrop { background: rgb(0 0 0 / 75%); }
#site-navigation nav { display: grid; gap: 4px; clear: both; }
#site-navigation nav a { display: block; padding: 12px; color: #fff; text-decoration: none; font-size: 18px; }
#site-navigation nav a:hover,
#site-navigation nav a:focus-visible { background: #252525; color: #ffdc00; }
#site-navigation button { display: block; margin-left: auto; border-color: #aaa; color: #fff; background: transparent; padding: 8px 12px; }
#site-navigation a:focus-visible,
#site-navigation button:focus-visible { outline: 2px solid #ffdc00; outline-offset: 2px; }