/* -------- MENU -------- */
body {
    margin: 0;
    font-family: Arial, sans-serif;        
    background-color: #313131;       /* farba stránky */
    color: #fff;
}

header {
    background-color: rgb(122, 47, 47); /* farba headera */
    color: white;
    padding: 10px 20px;
}

.header-container {
    display: flex;                  /* položky v riadku */
    align-items: center;            /* vertikálne centrovanie */
    justify-content: space-between; /* medzera medzi: logo naľavo, menu napravo */
    flex-wrap: wrap;                /* ak sa nezmestí, zalomí sa */
}

.logo {
    height: 50px;                /* veľkosť loga */
    width: auto;                 /* zachovanie proporcií */
}

.horne-menu a {
    color: white;               /* Menu farba a tvar textu a zarovnanie  */
    text-decoration: none;
    margin-left: 15px;
    font-weight: bold;
}

.horne-menu a:hover {
    text-decoration: underline; /* efekt pri hover v menu */
}

/* -------- HLAVNÝ OBSAH -------- */
.obsah {
    padding: 20px;  /* zarovnanie */
}

.obsah h1 {
    margin-top: 0;      /* zarovnanie */
}

/* Zvýraznený text */
.oznacene {
    font-weight: bold;
    font-style: italic;
    background-color: #380e0e;
    color: #fff;
    padding: 2px 4px;
}

/* Zoznamy */
ul li {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 5px;
}

.nadpis {
    color: #c02020;
    background-color: #101010;      /* zarovnanie a Farba nadpisu */
    padding: 6px 7px;
}
.galeria {
    display: flex;                       /* obrázky vedľa seba */
    justify-content: space-around;      /* rovnaké medzery medzi nimi */
    flex-wrap: wrap;                    /* aby sa nezlámali na menších obrazovkách */
    background-color: #101010;          /* farba pozadia */
}

.galeria img {
    width: 22%;
    height: auto;
    transition: transform 0.3s;      /* plynulý efekt zväčšenia */
    cursor: pointer;
    
}

.galeria img:hover {
    transform: scale(1.1);        /* zväčšenie o 10% pri hover */
    cursor: pointer;
}

.obdobia {
    text-align: center;     /* text pod obrazkami */
    display: flex;           /* vodorovne */
    justify-content: center;
    gap: 15%;               /* medzera medzi slovami */
    background-color: #101010;
    font-weight: bold;
    color: #c02020;
    padding: 6px 7px;
}
footer {
    background-color: rgb(122, 47, 47); /* rovnaké ako menu */
    color: white;                       /* text biely */
    text-align: center;                  /* centrovanie textu */
    padding: 20px 10px;                  /* odsadenie od okraja */
    margin-top: 40px;                    /* priestor nad footerom */
    font-size: 14px;                     /* menší text */
}
.vpravo {
    float: right;             /* obrázok bude napravo */
    width: 30%;             /* obtekanie */
    height: auto;              /* Nastaví automaticky vysku obrazku podla pomeru */
}

.vlavo {
    float: left;             /* obrázok bude napravo */
    width: 30%;             
    height: auto;             /* obtekanie */
}

.nadpis {
  text-align: center;            /* nadpis v strede */
}