* { margin: 0; border: 0; padding: 0; vertical-align: middle; box-sizing: border-box; border-collapse: collapse; }

html, body { height: 100dvh; line-height: 1.15em; font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #000000; background-color: #ffffff; }
div#body { max-width: 800px; margin: auto; }
h1, h2, h3, h4, h5, h6 { font-family: 'Indie Flower', cursive; }

div.sticky-bar { position: sticky; color: #ffffff; background-color: #ffffff; padding: 5px 0; border-bottom: 1px solid #cccccc; }
div.sticky-top { top: 0; }
div.sticky-bottom { bottom: 0; }

div.nav-logo { display: inline-block; max-width: calc(100% / 4); text-align: center; padding: 0.3em 0; }
div.nav-item { display: inline-block; width: calc(100% / 8); text-align: center; padding: 0.3em 0; }
div.nav-item a.nav-item-button { font-family: 'Indie Flower', cursive; font-size: 1.2em; line-height: 1em; transition: all 0.5s ease; text-decoration: none; color: #000000; display: inline-block; }
div.nav-item-wide a.nav-item-button:hover { transform: scale(1.2); font-weight: bold; color: #ff9900; }

div#nav-menu a.nav-menu-item { font-family: 'Indie Flower', cursive; font-size: 1.2em; }

div.sticky-bar img.site-logo { min-width: 5em; max-height: 3em; }

div#nav-menu { padding: 1em; background-color: #66ff66; position: relative; top: 0; left: 0; }
.hidden { display: none; }

@media screen and (min-width: 800px) {
    div.nav-item-slim { display: none; }
    div.nav-item-wide { display: inline-block; }
}
@media screen and (max-width: 799px) {
    div.nav-item-slim { display: inline-block; }
    div.nav-item-wide { display: none; }
    div.nav-logo { width: 75%; text-align: center; }
}