/* Globální nastavení pro celou stránku */
body {
  margin: 0 auto;               /* Vycentrování obsahu na velkých monitorech */
  padding: 20px;                /* Okraje od krajů obrazovky, aby se text nelepil na hrany mobilu */
  color: white;                 /* Základní barva písma */
  background-color: #050520;    /* Tmavě modré pozadí */
  font-family: Arial, Helvetica, sans-serif;
  max-width: 900px;             /* Web se neroztáhne do nekonečna na PC, ale... */
  width: 100%;                  /* ...na mobilech se krásně přizpůsobí šířce displeje (100%) */
  box-sizing: border-box;       /* Správné počítání okrajů */
}

/* Úprava nadpisů */
h1 {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

h2 {
  color: orange;                /* Vaše oranžová barva pro nadpisy sekcí */
  font-size: 1.4rem;
  margin-top: 30px;
}

/* Vylepšení seznamů pro lepší čitelnost na mobilech */
ul {
  padding-left: 20px;           /* Dostatečný prostor pro odrážky */
}

li {
  margin-bottom: 8px;           /* Mezery mezi řádky, aby se to na mobilu dobře četlo */
  line-height: 1.5;             /* Výška řádku, text se neslepí k sobě */
}

/* Horizontální čára */
hr {
  border: 0;
  height: 2px;
  background-color: midnightblue;
  opacity: 0.7;
  margin: 20px 0;
}

/* Odkazy */
a {
  text-decoration: underline;   /* Odkazy budou podtržené, aby bylo jasné, že jsou klikací */
  transition: color 0.2s;
}

a:hover {
  color: lightgray;             /* Změna barvy při najetí myší na PC */
}

/* Příprava pro galerii (pro soubor realimg.html, pokud ji tam používáte) */
.gal {
  display: flex;                /* Moderní zarovnání prvků vedle sebe */
  flex-wrap: wrap;              /* Když se nevejdou na mobilu vedle sebe, skočí na další řádek */
  gap: 10px;                    /* Mezery mezi obrázky */
  padding: 10px 0;
}

.gal img {
  width: 120px;
  height: 90px;
  object-fit: cover;            /* Obrázek se nedeformuje, ořízne se do správného poměru */
  border: 2px solid white;
  border-radius: 4px;           /* Lehce zaoblené rohy */
  transition: border-color 0.2s;
}

.gal img:hover {
  border-color: red;            /* Při najetí myší zčervená okraj */
}

/* Obecné nastavení pro jakékoliv větší obrázky na webu */
img {
  max-width: 100%;              /* Obrázek nikdy nepřeteče šířku mobilu */
  height: auto;                 /* Zachová správný poměr stran */
  display: block;
}