.navbar-brand, footer, h3 { font-family: 'Gentium Basic', serif; }
.navbar .brand { font-size: 1.45rem; }
.navbar div.tagline { color: #999; font-size: 0.9rem; margin-top: 19px; float: left; }

body {
    position: relative;
    color: #223;
    background-color: #f9fcfb;
}

#brand {
    color: #f9fcfb;
}

#help, #about, #home, #landing {
    min-height: calc(100vh - 100px);
}

#photo img {
    width: 100%; height: 100%; object-fit: contain;
}

ul.nobullet {
    list-style-type: none;
}

/* static pages */

div.static_page { margin-top: 4em; margin-bottom: 4em; }
div.static_page h3 { margin-bottom: 1em; }
#examples ul { color: #999; }
#examples a { color: #223; }
#contact { direction:rtl; unicode-bidi: bidi-override; }

nav li.nav-item button { color: #999; text-decoration: none; }
nav li.nav-item button:hover { color: #ccc; text-decoration: none; }

/* from https://verpex.com/blog/website-tips/css-effects-on-images-ii */
img.thumb {
    --t: 6px;  /* the thickness of the border */
    --g: -6px;  /* the gap between the border and image */

    padding: 0;
    outline: var(--t) solid #ffffff; /* color */
    outline-offset: var(--g);
    transition: .4s;
    cursor: pointer;
    background: #fff;
    margin: 2px;
}
img.thumb:hover {
    --t: 12px;
    --g: -12px;
    outline-color: #ffffff88; /* color */
}

@media screen and (max-width: 430px) {
  img.thumb {
      width: 180px;
      height: 180px;
  }
}