html {
   --navbar-height: 5rem;
   --navbar-sm-height: 4rem;
}

@keyframes navbarApeearIn {
   0% { transform: translateY(-100%); }
   100% { transform: none; }
}


.navbar-inner {
   transition: height 300ms;
}
.navbar-compact .navbar-inner {
   height: 3.75rem;
   animation: navbarApeearIn 300ms;
   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
@media (prefers-reduced-motion: reduce) {
 .navbar-inner {
   transition: none !important;
   animation: none !important;
 } 
}

.shadow-1 {
   box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1);
}

/**
 See @page-script.js 
*/
#scroll-down {
   top: 50vh;
}
#scroll-up {
   top: 0;
}