body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: black;
}

.gallery {
    flex: 1;
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

.image-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    scroll-snap-type: y mandatory; /* Povolíme posouvání mezi obrázky po celých obrázcích */
}

.image-container img {
    width: 100vw;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    scroll-snap-align: start; /* Obrázky se budou při posouvání zarovnávat nahoru pro lepší efekt */
}

.arrow {
    position: absolute;
    width: 30px; /* Šířka šipek */
    height: 30px; /* Výška šipek */
    opacity: 0.4; /* 40% průhlednost */
    background-color: white; /* Bílá barva šipek */
}

.arrow.up {
    top: 20px; /* Vzdálenost od horního okraje stránky */
    left: 50%;
    transform: translate(-50%, 0%) rotate(180deg); /* Šipka směřuje nahoru */
    clip-path: polygon(0% 0%, 50% 100%, 100% 0%); /* Trojúhelníkový tvar */
    z-index: 2;
    cursor: pointer;
}

.arrow.down {
    bottom: 20px; /* Vzdálenost od dolního okraje stránky */
    left: 50%;
    transform: translate(-50%, 0%) rotate(180deg); /* Šipka směřuje dolů (není potřeba ji otočit) */
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%); /* Trojúhelníkový tvar */
    z-index: 2;
    cursor: pointer;
}


.logo {
    position: absolute;
    background-size: cover; /* Aby se logo vyplnilo do celého prostoru */
    z-index: 3; /* Loga budou nad obrázky z galerie */
}

.top-left {
    top: 15px; /* Vzdálenost od horního okraje stránky */
    left: 20px; /* Vzdálenost od levého okraje stránky */
    width: 200px; /* Šířka loga */
    height: 116px; /* Výška loga */
    object-fit: cover;
    background-image: url('images/__logo.png'); /* Cesta k PNG obrázku horního loga */
}

.bottom-left {
    bottom: 15px; /* Vzdálenost od dolního okraje stránky */
    left: 20px; /* Vzdálenost od levého okraje stránky */
    width: 200px; /* Šířka loga */
    height: 116px; /* Výška loga */
    background-image: url('images/__contact.png'); /* Cesta k PNG obrázku dolního loga */
}

/* ... (předchozí CSS kód) ... */


/* Skryjeme nápis "Image 1" */
h1 {
    display: none;
}