html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
/* ---------------------------------------------------------------------------------------------------
   Menus must never run off the screen.

   A Bootstrap .dropdown-menu is absolutely positioned with no height limit, so on a short viewport —
   a phone in LANDSCAPE is only about 23rem tall, and the menu opens below a button that is already
   part-way down the page — the last items fall outside the viewport. The page itself often cannot be
   scrolled far enough to reach them either, because the menu is anchored to its button rather than to
   the document flow.

   Capping the height and letting the menu scroll itself fixes it everywhere at once: the hamburger on
   "Scrape Images To Delete", the one on "Random Feed", and any dropdown added later. Both units are
   declared deliberately — dvh tracks a mobile browser's collapsing address bar and wins where it is
   supported, vh is the fallback where it is not.
   --------------------------------------------------------------------------------------------------- */
.dropdown-menu {
    max-height: calc(100vh - 5rem);
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}