:root{
  --my-color-yellow: #f5c518; /* moje žlutá barva */
  --my-color-road-sign: #ffc600; /* moje žlutá barva - dopravní značka */
  --radius: 12px;
  --gap: 18px;
  --header-height: 15rem; /* velikost headeru */
  --desktop-font-size: 16px;
  --mobile-font-size: 12px;
}

::selection {
    background: var(--my-color-road-sign);   /* barva pozadí při označení */
    color: black;      /* barva samotného textu */
}

html {
    font-size: var(--mobile-font-size); /* nebo procentuálně: 100% */
    -webkit-text-size-adjust: 100%; /* zabrání automatickému zoomu na iOS */
}

body {
  /* Ujistěte se, že body nemá vlastní pozadí a má dostatečnou výšku pro scrollování */
  min-height: 100vh; /* Dynamická výška, která řeší lišty */
  position: relative; /* Důležité pro kontext obsahu */
  background-color:antiquewhite;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.body-background {
    position: fixed; /* TOTO funguje spolehlivě na iOS */
    top: 0;
    left: 0;
    width: 100vw;
    /* Zde je klíčová změna: */
    height: 100vh; /* Záloha pro staré prohlížeče */
    background: url("../img/background.jpg") center center no-repeat;
    background-size: cover;
    z-index: -1; /* Odsune pozadí za obsah stránky */
}

h1 { font-size: 2.5rem; text-align: center } /* cca 40px */
h2 { font-size: 2rem; text-align: center }   /* cca 32px */
h3 { font-size: 1.75rem; text-align: center }/* cca 28px */
h4 { font-size: 1.5rem; text-align: center } /* cca 24px */
h5 { font-size: 1.25rem; text-align: center }/* cca 20px */
h6 { font-size: 1rem; text-align: center }   /* 16px */

.page-content {
  position: fixed;
  height: 100vh;
  width: 100vw;
  background: url("../img/background.jpg") center center no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* >= 768px (tablet) */
/* md */
@media (min-width: 768px) {
  
}

/* >= 1024px (desktop) */
/* lg */
@media (min-width: 1024px) {
  html {
    font-size: var(--desktop-font-size);
  }
}