body, p, pre {
    font-family: "AtkinsonHyperlegibleNext", "sans-serif";
    font-size: large;
    font-weight: normal;
    color: #000;
    background-color: #fff;
    border: none;
}
figcaption {
    text-align: center
}
img, video {
    width: auto;
    max-width: 100%;
    max-height: 80vh;
    height: auto;
}
div.title-image img {
    max-height: 50vh;         
}
div.leaflet-popup-content {
    max-height: 60vh;
    overflow: auto;
}
@media (max-width: 991px) {
  input.nav-checkbox:checked ~ nav.dropdown { 
      display: none;
  }
  input.nav-checkbox ~ nav.dropdown {
      animation-duration: .4s;
      animation-name: slidedown;
      transform-origin: top center;
  }
  @keyframes slidedown {
      from {transform: scaleY(0); }
      to {transform: scaleY(1); }
  }
}
.red-block { color: #fff; background-color: #d22; }
.fade-down {background: linear-gradient(#fff8f8 10%,#fff);}
.fade-up {background: linear-gradient(#fff 90%,#fff8f8);}
h1, h2, h3, h4, a, .glyphicon { color: #d22; }
a:hover, a:active, a:focus { color: #f55; }
.nav-pills > li.active > a { background: #f55; }
.nav-pills > li.active > a:hover { background: #d22; }
.xx-large { font-size: xx-large; }
.x-large { font-size: x-large; }
.large { font-size: large; }
.top-margin-20 { margin-top: 20px; }
input.zoom + div img {cursor: zoom-in;}
input.zoom:checked + div img {max-height: 98vh; cursor: zoom-out}
input.zoom:checked + div:has(img) {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.95);
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100vh;
    width: 100vw;
    animation-name: zoomout;
    animation-duration: .4s;
    z-index: 10;
    cursor: zoom-out;
}
@media (prefers-color-scheme: dark) {
   .fade-down {background: linear-gradient(#600 10%,#111);}
   .fade-up {background: linear-gradient(#111 90%,#600);}
   img { filter: brightness(0.8) contrast(1.2); }
   hr { border-top: 1px solid #400; }
   body, p, pre {
       color: #bbb;
       background-color: #111;

   }
   input.zoom:checked + div:has(img) {
       background: rgba(64,64,64,0.95);
   }
}
@keyframes zoomout {
    from {width: 4vw; height: 4vh; top: 48vh; left: 48vw; }
    to {width: 100vw; height: 100vh; top: 0; left: 0;}
}
.burger {
    width: 35px;
    height: 5px;
    background-color: #d22;
    margin: 6px 0;
    transition: 0.4s;
}
label:has(div.burger) {
    cursor: pointer;
}
input.nav-checkbox ~ div div.burger-top {
    translate: 0 11px;
    rotate: -45deg;
}
input.nav-checkbox ~ div div.burger-bottom {
    translate: 0 -11px;
    rotate: 45deg;
}
input.nav-checkbox:checked ~ div div.burger {
    translate: none;
    rotate: 0deg;
    opacity: 1;
}
.burger-middle {
    opacity: 0;
}