* {
  box-sizing: border-box;
}

@font-face {
      font-family: hlavni;
      src: url("Rajdhani-Regular.ttf");
}

/* základní nastavení pro tzv. "tělo" stránky, pouze určíme základní font a řekneme, že se má veškeré předdefinované odsazení vynulovat */
body {
  font-family: hlavni;
  color: rgb(255, 246,0);
  margin: 0;
  background-color: black;
  display: flex; flex-direction: column;
}
article { text-align: center; }
article p { text-align: left; max-width: 80%; margin-left: 5em; margin-bottom: 8em; line-height: 1.8em; font-size: 1.4em; }

article img { max-width: 66%; }


h1{
      margin-left: 1em; font-size: 7em;
}



/* Určujeme nastavení pro sekci s hlavním obsahem stránky. Nejprve říkáme, že vytváříme flexibilní šablonu a říkáme, že pokud by stránka ve vodorovném směru přesahovala, má se zalomit */
.telo {  
  display: flex;
  flex-wrap: wrap;
}

/* Nastavení pro patičku naší stránky */
footer {
  padding: 20px;
  text-align: left;
}

/* Pravidlo pro zachování responzibility. Pokud je zobrazovaná šírka nižší než 700px, namísto dvou sloupců vedle sebe zobrazíme  dva bloky nad sebou. */
@media screen and (max-width: 700px) {
  .obal, .navigace {   
    flex-direction: column;
  }
}

/* Stanovujeme pravidla pro blok obsahující naši fotogalerii. Má být flexibilní, obsah, který by přečuhoval se má raději zalomit na nový řádek a určujeme odsazení od okraje */
.galerie {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Nastavení pro sloupce s fotkami, které mají být čtyři, tedy jeden má zabírat maximálně čtvrtinu (25%) dostupné šířky. Naposledy jim nastavujeme odsazení od okrajů */
.sloupec {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

/* Nastavení vlastností pro samotné fotky, které jsou obsaženy ve sloupci. Nastavujeme jim odskok od prvku, který se nachází nad nimi a vertikálně mají být zarovnány na střed dostupného rámečku */
.sloupec img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Pravidlo pro zachování responzibility. Pokud by byla šířka displeje menší než 800px, nebudeme zobrazovat fotky ve čtyřech sloupcích, ale pouze ve dvou. */
@media (max-width: 800px) {
  .sloupec {
    flex: 50%;
    max-width: 50%;
  }

  article { text-align: center; }
article p { text-align: left; margin-left: 1em; margin-bottom: 4em; line-height: 1.8em; font-size: 1.4em; }

article img { max-width: 66%; }


h1{
      margin-left: .45em; font-size: 4em;
}
}

/* Pravidlo pro zachování responzibility. Pokud by byla šířka displeje menší než 600px nebudeme zobrazovat fotky ve dvou sloupcích, ale v jednom. */
@media (max-width: 600px) {
  .sloupec {
    flex: 100%;
    max-width: 100%;
  }
}