/* Navbar */
.navbar { position: sticky; top: 0; z-index: 1000; background: rgb(58,58,60); color: rgb(199, 199, 204); box-shadow: 0px 1px rgba(28,28,30,0.5); }
.navbar a { color: inherit; text-decoration: none; }
.navbar__container { max-width: 1100px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; height: 32px; gap: 16px; }
.navbar__brand { font-weight: 700; letter-spacing: 0.2px; }
.navbar__logo { font-family: 'warmluft-font'; font-style: italic; font-size: 1.2em; padding: 8px 0; display: inline-block; text-decoration: underline !important; text-decoration-color: rgb(255,59,48) !important; }
.navbar__menu { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: 0px; }
.navbar__menu li a { font-family: 'warmluft-font'; display: inline-block; padding: 8px 16px; transition: background-color .15s ease; }
.navbar__menu li a:hover { background: rgba(255,255,255,0.05); }
.navbar__menu li a.active { background: rgba(255,255,255,0.10); }
.navbar__toggle { display: none; margin-left: auto; background: transparent; color: inherit; border: 0; font-size: 20px; cursor: pointer; }

/* Mobile */
@media (max-width: 640px) {
  .navbar__toggle { display: block; }
  .navbar__menu { display: none; width: 100%; position: absolute; left: 0; top: 100%; background: rgb(78,78,80); padding: 0;}
  
  .navbar__menu li { width: 100%; }
  .navbar__menu li a { display: block; width: 100%; padding: 12px 16px}
  .navbar__menu li:hover { background: rgba(255,255,255,0.05); }
  .navbar__menu li.active { background: rgba(255,255,255,0.10); }
  .navbar__menu.is-open { display: block; box-shadow: 0px 2px 8px rgba(28,28,30,0.5); }
}

/* Footer */
.footer { height: 32px; position: absolute; bottom: 0; left: 0; right: 0; z-index: 999; background: rgb(58,58,60); color: rgb(199, 199, 204)}
.footer p { font-family: 'warmluft-font'; text-align: center; display: flex; align-items: center; justify-content: center; height: 100%; margin: 0;}
.footer__container { height: 32px;}