*, :after, :before { box-sizing: border-box; }

html {
    font-size: 1.3rem; /* nebo 100% = 16px (výchozí) */
  }

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    background-color: rgb(230, 230, 203);
    width: 100%;
    height: auto;

    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: lighter;
    font-style: normal; 
    text-align: center;
    overflow-x: hidden;
}

    main{
    display: flex;
    flex-direction: column;
    justify-content: center;  /* vodorovně na střed */
    align-items: center;      /* svisle na střed, pokud potřebuješ */
    min-height: 100vh;  
    padding: 10px;
    }

section {
padding: 1.5rem 1.5rem;
}

.misto{
    background-color: rgb(230, 230, 203);
    width: 100%;
}

.card{
    padding: 10px;
}

h1{
    text-align: center;
    font-style: italic;
    font-size: 1.8rem;
    margin: 3rem 0rem;
    padding: 20px;
    background-color: rgb(230, 230, 203);
}

section h2{
    background-color: #c5d4c6;
    padding: 10px;
    text-align: center;
    color:white;
}

h3{
    padding: 15px;
}

.footer{
    background-color: rgb(230, 230, 203);
}


/*min width třeba 1600 px a více upravit to tak aby byl ten header image zase ještě větší*/
@media only screen and (min-width: 1100px) {

    img {
        width: 100%;
    }

    .more {
    display: flex;
    text-align: center;
    gap: 4rem;
    }

    .misto_obrazky{
        display: flex;
        flex-direction: row;
        padding: 10px;
        width: 100%;
    }

    .misto_obrazky img{
        padding: 25px;
        height: 300px;       /* nastav stejnou výšku */
        width: 100%;         /* zachová poměr stran */
        object-fit: contain; /* nebo cover, podle potřeby */
        vertical-align: middle; /* vyrovná je na střed řádku */
    }

    .separator{
        height: 15px;             /* výška pruhu */
        background-color: #a69514; /* modrý pruh */
        width: 100%;
    }
}

@media only screen and (min-width: 600px) and (max-width: 1100px) {

       html {
    font-size: 1.2rem; /* nebo 100% = 16px (výchozí) */  
  }

    img {
        width: 100%;
    }

    .potkamese img{
        width: 120%;
        padding: 0;
    }

    .misto_obrazky{
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .misto_obrazky img{
        padding: 10px;
        height: 400px;       /* nastav stejnou výšku */
        width: 100%;         /* zachová poměr stran */
        object-fit: contain; /* nebo cover, podle potřeby */
        vertical-align: middle; /* vyrovná je na střed řádku */
    }

    section {
            padding: 1.5rem;
        }

    .more {
        flex-direction: column;
          gap: 2rem;
         }
}

    @media only screen and (max-width: 600px) {

    html {
        font-size: 0.9rem; /* nebo 100% = 16px (výchozí) */  
        }

        body{
            overflow-x: hidden;
            padding: 0;
            margin: 0;
        }

      img {
        width: 100%;
         }

        .misto_obrazky {
          width: 100%;
          height: auto; /* Neomezujeme výšku */
          overflow: visible; /* Nechceme nic skrývat */
        }
      
        .misto_obrazky img {
          width: 100%;
          height: auto; /* Zachová poměr stran obrázku */
          display: block;
            padding-left: 1rem;
            padding-right: 1rem;
        }

         section {
            padding: 1.5rem;
        }

        .more {
        flex-direction: column;
          gap: 2rem;
         }

      }