@font-face{
    font-family: 'Nasa';
    src: url(nasalization-rg.otf);
  }
  
  body {
      margin: 0;
      padding: 0;
      font-family: 'Nasa';
      padding-top: 80px; 
      background-color: #000000 ;
    }  
  
    a {
      color: white;
    }
  
  .header {
      background-color: #000000;
      position: fixed;
      width: 100%;
      z-index: 3;
      top: 0;
    }
    
    /* nastavení menu */
    .header ul {
      margin: 0;
      padding: 0;
      list-style: none;
      overflow: hidden;
    }
    
    /* nastavení stylu zmenšeného menu */
    .header li a {
      display: block;
      padding: 28px 20px;
      text-decoration: none;
      transition: background-color 1s;
    }
    
    /* nastavení efektů pro menu */
    .header li a:hover,
    .header .menu-btn:hover {
      background-color: #313191;
      transition: 1s;
    }
    
    /* nastavení loga */
    .header img{
      height: 60px;
      position: relative; 
      transform: translate(10px, 1px); 
    }
    
    /* nastavení velikosti a animace zmenšeného menu */
    .header .menu {
      clear: both;
      max-height: 0;
      transition: max-height 1.8s ease-out; /* Animace výšky */
      overflow: hidden; /* Skrývání obsahu */
    }
    
    /* ikonka menu */
    .header .menu-icon {
      cursor: pointer;
      display: inline-block;
      float: right;
      padding: 40px 20px;
      position: relative;
      user-select: none;
    }
    
    /* nastavení vzhledu ikonky menu */
    .header .menu-icon .navicon {
      background:#313191;
      display: block;
      height: 2px;
      position: relative;
      transition: background 0.5s ease-out;
      width: 18px;
    }
    
    /* nastavení animace ikonky menu */
    .header .menu-icon .navicon:before,
    .header .menu-icon .navicon:after {
      background: #313191;
      content: "";
      display: block;
      height: 100%;
      position: absolute;
      transition: all 0.5s ease-out;
      width: 100%;
    }
    
    /* jdenostlivé čárky menu */
    .header .menu-icon .navicon:before {
      top: 6px; 
    }
    
    .header .menu-icon .navicon:after {
      top: -6px; 
    }
    
    .header .menu-icon .navicon:nth-child(2):before {
      top: 4px; 
    }
    
    /* nastavení otevírání menu  */
    .header .menu-btn {
      display: none;
    }
    
    /* nastavení kam až půjde menu */
    .header .menu-btn:checked ~ .menu {
      max-height: 500px; /* Největší možná výška */
    }
    
    /* zakrytí prostření čárky při animaci */
    .header .menu-btn:checked ~ .menu-icon .navicon {
      background: transparent;
    }
    
    /* jedna část ikony x */
    .header .menu-btn:checked ~ .menu-icon .navicon:before {
      transform: rotate(-45deg);
    }
    
    /* druhá část ikony x */
    .header .menu-btn:checked ~ .menu-icon .navicon:after {
      transform: rotate(45deg);
    }
    
    /* uprávení čárek do tvaru x */
    .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
    .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
      top: 0;
    }
  
    .video-background {
      position: absolute; 
      top: 0;
      left: 0;
      width: 100%; 
      height: 100%;
      object-fit: cover; 
      z-index: -1; 
    }
    
    .uprava_obsahu{
        height: 100%; /* Nastav výšku podle potřeby */
        width: 100%; /* Nebo jinou šířku */
        color: white;  
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .obsah{
        display: flex; /* Použití flexboxu */
        align-items: center; /* Vertikální centrování */
        width: 100%;
        margin-top: 55%; 
    }

    .obsah img {
        width: 30%; /* Maximální šířka obrázku */
        margin: 10% 10% 0 10%;
    }

    .obsah p {
        max-width: 45%; /* Maximální šířka textu */
        line-height: 1.6; /* Větší mezera mezi řádky pro lepší čitelnost */
        margin-right: 5%;
    }

    .stred {
        display: flex;
        justify-content: center; 
        align-items: center; 
    }
    
    .stred img {
        max-width: 30%; /* Přizpůsobení šířce rodičovského prvku */
        height: auto; /* Zachování poměru stran */
    }

    .obsah2 {
        display: flex; /* Použití flexboxu */
        align-items: center; /* Vertikální centrování */
        width: 100%;
        margin-bottom: 10%;
    }
    
    .obsah2 p {
        max-width: 45%; /* Maximální šířka textu */
        line-height: 1.6; /* Větší mezera mezi řádky pro lepší čitelnost */
        margin-left: 5%;
    }
    
    .obsah2 img {
        width: 30%; /* Maximální šířka obrázku */ 
        margin: 0 0 0 10%;

    }
    
    .gallery {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4 sloupce pro fotografie */
        gap: 10px; /* Mezera mezi obrázky */
        margin: 3%;
        text-align: center; /* Centering the text */
    }
    
    .gallery h2 {
        grid-column: span 4; /* Zajišťuje, že nadpis zabírá celý řádek */
        margin-bottom: 5%;
    }
    
    .gallery img {
        width: 100%; /* Šířka obrázků */
        height: 95%; /* Pevná výška */
        object-fit: cover; /* Udržuje poměr stran */
        border-radius: 8px; /* Zaoblení rohů obrázků */
        transition: 0.2s;
    }
    

    footer{
        background-color: #000000;
        padding: 0 10%  5% 10%;
        margin-top: 0;

    }

    .vzhled{
        width: 80%;
        align-items: center;       
        justify-content: center; /* Horizontální centrování */
        margin: 0 auto; /* Nastaví okraje pro centrování */
    }

    .prvni {
        display: flex; /* Použití flexboxu pro centrování */
        justify-content: center; /* Horizontální centrování */
    }
    
    .prvni img {
        width: 10%; /* Šířka obrázků */
    }
    
    .druhy {
        width: 100% ;
        align-items:  center ;
        display: flex; /* Použití flexboxu pro centrování */
        justify-content: center; /* Horizontální centrování */
        flex-wrap: wrap; /* Umožňuje zalamování obrázků na další řádek */
    }
    
    .druhy img {
        width: 5%; /* Nastavte požadovanou šířku */
        height: 100%;
        object-fit: cover; /* Udržuje poměr stran obrázku */
        margin: 2%; /* Mezera mezi obrázky */
    }

    .treti {
        text-decoration: none; /* Odstranění podtržení */
        display: flex; /* Použití flexboxu pro rozložení */
        justify-content: space-around; /* Vytvoření mezery mezi odkazy */
        margin: 4% 0; /* Vzdálenost nad a pod sekcí */
    }
    
    .treti a {
        margin: 0 3%; /* Vzdálenost mezi jednotlivými odkazy */
        text-decoration: none; /* Odstranění podtržení */
        color: white; /* Barva textu */
        font-weight: bold; /* Volitelné: zvýraznění textu */
    }
    
    .treti a:hover {
        color: #313191; /* Volitelné: změna barvy při hover */
    }

    @media (min-width: 1025px) {
      .header li {
        float: left;
      }
      .header li a {
        padding: 20px 30px;
        height: 65px;
      }
      .header .menu {
        clear: none;
        float: right;
        max-height: none;
      }
      .header .menu-icon {
        display: none;
      }
      .extra-menu-item {
        display: none;
      }
      .header ul{
        height: 65px;
      }
      .hlavni{
        text-align: center;
        position: absolute;
        padding: 10%;
        font-size: 1000%;
      }
      .gallery img:hover {
        transform: scale(1.05);
    }
    }
  
    @media (max-width: 767px){
      .header img{
        height: 60px;
        position: relative; 
        transform: translate(10px, 10px);
      }
      .hlavni{
        margin-top: 70%;
        text-align: center;
        font-size: 300%;
        display: flex;
        justify-content: center; 
        align-items: center; 
      }
      .gallery {
        display: flex;
        flex-direction: column; /* Všechny obrázky pod sebou */
        align-items: center; /* Centrovat obrázky */
        margin: 2%;
    }
    .gallery h2 {
        margin-bottom: 20px; /* Mezera pod nadpisem */
    }
    .gallery img {
        width: 100%; /* Šířka obrázku */
        height: auto; /* Udržuje poměr stran */
        object-fit: cover; /* Udržuje poměr stran */
        border-radius: 8px; /* Zaoblení rohů obrázků */
        margin-bottom: 30px; /* Větší mezera pod obrázky */
        transition: 0.2s;
        display: block; /* Ujistíme se, že obrázky jsou blokové prvky */
    }    
      .prvni img {
        width: 20%; /* Šířka obrázků */
    }

      .druhy img {
        width: 15%; /* Nastavte požadovanou šířku */
        height: 100%;
        object-fit: cover; /* Udržuje poměr stran obrázku */
        margin: 2%; /* Mezera mezi obrázky */
    }
      .treti {
        flex-direction: column; /* Udržení sloupcového rozložení */
        align-items: center; /* Centrovat odkazy */
    }
    .treti a {
        margin: 3% 0; /* Větší mezera mezi odkazy */
        font-size: 100%; /* Ještě větší text pro mobilní zařízení */
    }
    .obsah {
        flex-direction: column; /* Uložení obsahu do sloupcového rozložení */
        align-items: center; /* Centrovat obsah */
        margin-top: 100%; /* Méně prostoru nahoře pro mobilní zařízení */
    }
    .obsah img {
        width: 80%; /* Zvětšení šířky obrázku na 80% pro lepší viditelnost */
        margin: 10% 0; /* Větší mezera mezi obrázky */
    }
    .obsah p {
        max-width: 90%; /* Umožnění širšího textu */
        margin-right: 0; /* Odstranění pravého okraje */
        margin-bottom: 10%; /* Větší mezera pod textem */
    }
    .obsah2 {
        flex-direction: column; /* Uložení obsahu do sloupcového rozložení */
        align-items: center; /* Centrovat obsah */
    }
    .obsah2 img {
        width: 80%; /* Zvětšení šířky obrázku na 80% */
        margin: 10% 0; /* Větší mezera mezi obrázky */
    }
    .obsah2 p {
        max-width: 90%; /* Umožnění širšího textu */
        margin-left: 0; /* Odstranění levého okraje */
        margin-bottom: 10%; /* Větší mezera pod textem */
    }
}

    @media (min-width: 768px) and (max-width: 1024px) {
        .uprava_obsahu{
            font-size: larger;
        }

        .header img{
          height: 80px;
          position: relative; 
          transform: translate(10px,);
        }
       
        .hlavni {
            margin: 45%;
            text-align: center;
            font-size: 500%;
            display: flex;
            justify-content: center; 
            align-items: center; 
        }
        
        .obsah {
            flex-direction: column; /* Sloupcové uspořádání */
            align-items: center; /* Centrovat obsah */
            margin-top: 60%; /* Odstranění mezery pod .hlavni */
        }
    
        .obsah img {
            width: 80%; /* Šířka obrázku na 80% */
            margin: 5% 0; /* Větší mezera mezi obrázky */
        }
    
        .obsah p {
            max-width: 90%; /* Umožnění širšího textu */
            margin-right: 0; /* Odstranění pravého okraje */
            margin-bottom: 10%; /* Větší mezera pod textem */
        }
    
        .obsah2 {
            flex-direction: column; /* Sloupcové uspořádání */
            align-items: center; /* Centrovat obsah */
            margin-bottom: 10%; /* Větší mezera pod .obsah2 */
        }
    
        .obsah2 img {
            width: 80%; /* Šířka obrázku na 80% */
            margin: 5% 0; /* Větší mezera mezi obrázky */
        }
    
        .obsah2 p {
            max-width: 90%; /* Umožnění širšího textu */
            margin-left: 0; /* Odstranění levého okraje */
            margin-bottom: 5%; /* Větší mezera pod textem */
            margin-top: 10%;
        }
    }