body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    overflow: hidden; /* Zabrání případnému překročení */
}

/* Kontejner pro pozadí s vertikálními pruhy */
.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}

/* Modrý pruh */
.blue {
    background-color: #1e3a8a; /* Modrá */
    width: 33.33%;
    height: 100%;
}

/* Černá čára mezi barvami */
.separator {
    background-color: black;
    width: 2px;
    height: 100%;
}

/* Žlutý pruh */
.yellow {
    background-color: #fbbf24; /* Žlutá */
    width: 33.33%;
    height: 100%;
}

/* Černá čára mezi barvami */
.separator2 {
    background-color: black;
    width: 2px;
    height: 100%;
}

/* Červený pruh */
.red {
    background-color: #e11d1d; /* Červená */
    width: 33.33%;
    height: 100%;
}

/* Kontejner pro obsah (text a tlačítka) */
.content {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Nadpis */
h1 {
    color: black; /* Text nadpisu je černý */
    font-size: 3rem;
    margin-bottom: 30px;
}

/* Kontejner pro obrázek */
.image-container {
    margin: 20px 0; /* Vytvoření prostoru kolem obrázku */
}

/* Nastavení pro obrázek s černým rámem */
#logo {
    width: 200px; /* Nastavení šířky obrázku */
    height: auto; /* Zachování poměru stran */
    border-radius: 10px; /* Zaoblení rohů obrázku */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Přidání jemného stínu pro lepší vzhled */
    margin-bottom: 30px; /* Vytvoření mezery mezi obrázkem a tlačítky */
    
    /* Přidání černého rámu kolem obrázku */
    border: 5px solid black; /* Černý rám o šířce 5px */
}

/* Kontejner pro tlačítka (vedle sebe) */
.button-container {
    display: flex;
    justify-content: center; /* Tlačítka budou zarovnaná na střed */
    gap: 10px; /* Mezera mezi tlačítky */
}

/* Tlačítka */
.button {
    border-radius: 10px;
    background-color: #e11d1d; /* Červená pro tlačítka */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Tlačítka s modrým pozadím při hover */
.button2 {
    background-color: #000000; /* Černé pozadí pro tlačítko */
    color: #ffffff; /* Bílé písmo */
    border: 2px solid #fafafa;
}

.button2:hover {
    background-color: #1e3a8a; /* Při hover změna na modrou */
    color: rgb(0, 0, 0); /* Text bude černý */
}

.button:hover {
    background-color: #ffffff; /* Tmavší červená při hover */
}

/* Kontejner pro tlačítko zpět */
.back-container {
    text-align: center;
    margin-top: 30px;
}
/* Kontejner pro celkový obsah */
.content {
    position: relative;
    z-index: 1;
    text-align: center; /* Text bude zarovnaný na střed */
    display: flex;
    flex-direction: column; /* Aby vše bylo vertikálně */
    align-items: center; /* Zarovná obrázky a texty na střed */
    justify-content: center; /* Svislé centrování */
    height: 100vh; /* Výška 100% pro centrování vertikálně */
}

/* Kontejner pro obrázky vedle sebe */
.image-container {
    display: flex;
    justify-content: center; /* Zarovná obrázky na střed */
    gap: 20px; /* Mezera mezi obrázky */
    margin-top: 20px; /* Mezera nahoře */
}

/* Styl pro jednotlivé obrázky */
.image-item img {
    width: 300px; /* Stejná šířka pro všechny obrázky */
    height: 300px; /* Stejná výška pro všechny obrázky */
    object-fit: cover; /* Obrázky budou oříznuty, aby vyplnily prostor */
    border-radius: 10px; /* Zaoblení rohů obrázku */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Stín kolem obrázků */
}
h2 {
    color: black; /* Výplň textu */
    -webkit-text-stroke: 1px white; /* Bílý obrys */
    text-align: center;
    margin-bottom: 30px;
}
.logo2 {
    border: 0cm;
}