/********************************************
  www.HS-and-H.com Footer css (responsive)
********************************************/

:root {
  --footer-height: 36px;
  --footer-bg: #333333;
  --footer-ink: #d7d7d7;
  --footer-link: #B2FFE6;
  --footer-link-hover: #C3FFE6;
  --page-max: 1440px;
}

html, body {
  margin: 0;
  padding: 0;
}

/* Offset page content so fixed footer doesn’t overlap */
body {
  padding-bottom: var(--footer-height);
}

/* iOS safe area (optional) */
@supports (padding: max(0px)) {
  body { padding-bottom: calc(var(--footer-height) + env(safe-area-inset-bottom)); }
}

.left-element { float: left; }
.right-element { float: right; }

#footer {
  position: fixed;
  inset: auto 0 0 0;              /* bottom:0; left:0; right:0 */
  height: var(--footer-height);
  background-color: var(--footer-bg);
  color: var(--footer-ink);
  font-family: 'Myriad Pro', Arial, system-ui, sans-serif;
  font-size: 11pt;
  box-shadow: inset 0 0 8px #252525;
  z-index: 9999;
}

/* Center content and keep padding consistent */
#footer > .left-element,
#footer > .right-element {
  padding: 4px 16px;
}

#footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#footer a {
  color: var(--footer-link);
  text-decoration: none;
}
#footer a:hover {
  color: var(--footer-link-hover);
  text-decoration: underline;
}

/* Narrow screens: stack to avoid crowding */
@media (max-width: 720px) {
  #footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 8px;
  }
  .left-element, .right-element {
    float: none;
    padding: 0;
  }
  #footer ul li { display: inline; }
}