nav#topbar.closed { top: -10rem; } nav#topbar { background-color :var(--card-background-color); width: 100vw; position: sticky; display: inline-block; z-index: 9999; padding: 0.2rem 0.7em; margin: 0; white-space: nowrap; top: 0rem; transition: top 300ms; line-height: 2em; max-width:98vw; } nav#topbar a { display: inline-block; padding: 0 0.6em; line-height: 2em; margin: 0; white-space: nowrap; vertical-align: middle; } nav#topbar .navbar-propic { margin-right: 0.3rem; border-radius: 0.2rem; vertical-align: sub; } nav#topbar a.align-right { float: right; } nav img { height: 1.2em; display: inline; vertical-align:middle; box-sizing: border-box; } nav a#mobileMenu { display: none; } nav .navbar-container { overflow: hidden; } @media only screen and (max-width: 924px) { nav#topbar::before { transition-delay: 200ms; transition-property: background-image; } nav#topbar:has(.navbar-container:not(.open))::before{ background-image: url('/res/furizon.png'); background-size: contain; background-position: 50%; background-origin: content-box; } nav#topbar.closed { top: -100rem; } nav#topbar a#mobileMenu { display: block; max-width: 3rem; } nav#topbar .navbar-container { transition: max-height 200ms; display: flex; flex-direction: column; } nav#topbar .navbar-container:not(.open) { max-height: 0rem; } nav#topbar .navbar-container.open { max-height: 30rem; } }