.nav { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: calc(var(--nav-width) + var(--gap) * 2); margin-inline-start: auto; margin-inline-end: auto; line-height: var(--header-height); } .nav a { display: block; } .logo, #menu { display: flex; margin: auto var(--gap); } .logo { flex-wrap: inherit; } .logo a { font-size: 24px; font-weight: 700; } .logo a img, .logo a svg { display: inline; vertical-align: middle; pointer-events: none; transform: translate(0, -10%); border-radius: 6px; margin-inline-end: 8px; } button#theme-toggle { font-size: 26px; margin: auto 4px; } body.dark #moon { vertical-align: middle; display: none; } body:not(.dark) #sun { display: none; } #menu { list-style: none; word-break: keep-all; overflow-x: auto; white-space: nowrap; } #menu li + li { margin-inline-start: var(--gap); } #menu a { font-size: 16px; } #menu .active { font-weight: 500; border-bottom: 2px solid currentColor; } .lang-switch li, .lang-switch ul, .logo-switches { display: inline-flex; margin: auto 4px; } .lang-switch { display: flex; flex-wrap: inherit; } .lang-switch a { margin: auto 3px; font-size: 16px; font-weight: 500; } .logo-switches { flex-wrap: inherit; } .sub-menu { position: absolute; visibility: hidden; list-style: none; z-index: 10; border-radius: var(--radius); padding: 0 15px; background-color: var(--code-bg); border: 1px solid var(--tertiary); } .sub-menu a:hover { text-shadow: 0px 0px 1px currentColor; } .menu-item:hover .sub-menu { visibility: visible; display: block; } .sub-menu:hover { visibility: visible; } .arrow-down { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--primary); position: relative; top: 1em; left: 6px; }