web_zkreml/styly.css

body, html {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
}
/* Nastavení stylu pro všechny obrázky na stránce */
img {
    display: block; /* Zobrazení jako blok pro možnost centrování */
    margin-left: auto; /* Automatický levý okraj pro centrování */
    margin-right: auto; /* Automatický pravý okraj pro centrování */
    width: 150px; /* Pevná šířka obrázku */
    border-radius: 85px; /* Velké zaoblení rohů */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lehký stín pro lepší vizuální efekt */
}

.flex-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 20px;
}

.flex-item {
    width: 150px;
    padding: 10px;
    background-color: #f4f4f4;
    border-radius: 5px;
    text-align: center;
    color: black;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.flex-item:hover {
    background-color: #e0e0e0;
}

footer {
    margin-top: 20px;
    padding: 10px;
    background-color: #f1f1f1;
}
.flex-container {
    display: flex;
    justify-content: center;
    gap: 20px; /* Mezery mezi položkami */
    padding: 20px; /* Okraj kolem kontejneru */
}

.flex-item {
    width: 150px;
    padding: 10px;
    background-color: #f4f4f4;
    border-radius: 5px;
    text-align: center;
    color: black;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    margin: 5px; /* Menší okraj kolem každé položky pro jemnější nastavení */
}
body, html {
    height: 100%; /* Zajišťuje, že HTML a BODY pokrývají celou výšku stránky */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Nastaví flex items ve sloupci */
}

main {
    flex: 1; /* Zajišťuje, že hlavní obsah zaujme všechno dostupné místo */
}

footer {
    text-align: center; /* Centruje text ve zápatí */
    padding: 10px 0; /* Přidává padding na horní a dolní části zápatí */
    background-color: #f1f1f1; /* Nastaví barvu pozadí zápatí */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* Přidává stín, který ohraničuje zápatí od zbytku stránky */
}
.flex-container {
    display: flex;
    justify-content: center;  /* Zarovná položky horizontálně na střed */
    align-items: center;  /* Zarovná položky vertikálně na střed */
    flex-wrap: wrap;  /* Umožní položkám zalamovat na nový řádek, pokud není dost místa */
    height: 100vh;  /* Zajistí, že kontejner zaujme minimálně celou výšku obrazovky */
    padding: 20px;
    gap: 20px;  /* Vytvoří mezery mezi položkami */
}
.flex-item {
    width: 200px;  /* Fixní šířka rámečků */
    margin: 10px;  /* Okraje kolem každého rámečku */
    padding: 20px;  /* Vnitřní padding rámečků */
    background-color: #f4f4f4;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
#dynamic-content {
    min-height: 10vh;  /* Minimální výška obsahu, zajišťuje, že obsah neklesne příliš nízko */
    margin-top: 50px;  /* Horní okraj pro oddělení od ostatních elementů */
}
.flex-item {
    background-color: #f0f2f5; /* světlé šedá pro neutrální vzhled */
    color: #333; /* tmavě šedá pro text */
    border: 2px solid #ccc; /* lehký šedý rámeček */
}
.button {
    background-color: #28a745; /* zelená pro tlačítka akce */
    color: white;
}

.button:hover {
    background-color: #218838; /* tmavší zelená pro efekt při najetí myší */
}
.button {
    background-color: #28a745; /* zelená pro tlačítka akce */
    color: white;
}

.button:hover {
    background-color: #218838; /* tmavší zelená pro efekt při najetí myší */
}
footer a {
    text-decoration: none; /* Odstraňuje podtržení odkazu */
    color: inherit; /* Dědí barvu textu od rodiče */
}
footer i {
    margin-left: 5px; /* Přidává malý prostor mezi textem a ikonou */
}
/* Základní styly pro desktopová zařízení */
.flex-item {
    font-size: 16px;  /* Základní velikost písma */
    padding: 10px;
}
/* Základní styly pro rámečky */
.flex-item {
    width: 200px;  /* Základní šířka pro desktop */
    margin: 10px;
    padding: 20px;
    font-size: 16px;  /* Základní velikost písma */
}

/* Media query pro malá zařízení */
@media (max-width: 768px) {
    .flex-item {
        width: 120%;  /* Zvětší rámečky na celou šířku kontejneru */
        padding: 20px;
        font-size: 20px;  /* Větší písmo pro lepší čitelnost */
        margin: 10px 0;  /* Vertikální marginy, horizontální zrušeny */
    }
}
/* Media query pro malá zařízení */
@media (max-width: 768px) {
    .button {
        font-size: 22px;  /* Zvětší písmo tlačítka */
        padding: 15px 30px;  /* Větší padding pro snadnější ovládání */
    }
}
/* Media query pro malá zařízení */
@media (max-width: 768px) {
    body {
        font-size: 18px; /* Zvětší základní velikost písma pro lepší čitelnost */
    }

    h1, h2, h3 {
        font-size: 20px; /* Zvětší nadpisy pro lepší viditelnost */
    }

    .button, a {
        font-size: 18px; /* Větší písmo pro tlačítka a odkazy */
        padding: 15px 30px; /* Větší padding pro snadnější ovládání */
    }

    .flex-item {
        padding: 20px; /* Větší padding uvnitř flex-itemů */
        margin: 10px 0; /* Upravený margin pro lepší vzhled */
        width: 100%; /* Flex-itemy zaujímají celou dostupnou šířku */
    }
}
.flex-item {
    font-size: 18px; /* Zvětší velikost písma pro lepší čitelnost */
    font-weight: bold; /* Ztuční text pro lepší viditelnost */
    color: #333; /* Tmavě šedá pro lepší kontrast */
    padding: 20px; /* Ujistěte se, že je dostatek paddingu kolem textu */
    margin: 10px; /* Dostatek prostoru mezi rámečky */
    background-color: #f4f4f4; /* Světlé pozadí pro kontrast s textem */
    border: 1px solid #ccc; /* Subtilní okraje mohou také pomoci definovat rámečky */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Stín dodává hloubku */
    border-radius: 10px; /* Zaoblené rohy pro modernější vzhled */
}

@media (max-width: 768px) {
    .flex-item {
        font-size: 20px; /* Ještě větší font na malých zařízeních */
        padding: 25px; /* Více prostoru kolem textu */
    }
}
/* Větší tlačítka na malých zařízeních */
@media (max-width: 768px) {
    .button {
        padding: 15px 30px; /* Větší padding pro snadnější ovládání */
        font-size: 20px; /* Větší font pro lepší čitelnost */
    }
}
footer a.name-link {
    color: #007BFF; /* Modrá barva odkazu */
    text-decoration: none; /* Žádné podtržení jako výchozí */
    font-weight: bold; /* Tučné písmo */
    transition: color 0.3s ease; /* Plynulá změna barvy */
}

footer a.name-link:hover {
    color: #0056b3; /* Tmavší modrá při najetí myši */
    text-decoration: underline; /* Podtržení při najetí myši */
}