html {
    font-size: 16px; /* Základná veľkosť písma stránky (splní selektor html) */
}

body {
    font-family: Arial, sans-serif; /* Nastaví písmo pre celú stránku */
    background: #f8f8f8;            /* Svetlé pozadie */
    color: black;                   /* Základná farba textu */
    margin: 0;                      /* Zruší predvolené okraje */
    line-height: 1.6;               /* Výška riadkov */
    text-align: center;             /* Centrovanie textu */
}

header {
    padding: 0px;                   /* odsadenie,v respektíve deosadenie */
    background: #6a1b9a;             /*  pozadie  */
    color: white;                     /* Farba textu */
}

header .logo {
    width: 100px;       /* Šírka loga */
    height: auto;       /* Zachovanie pomeru strán */
    margin-bottom: 10px;/* Odsadenie pod logom */
    padding-top:50px;
}

header .bannerObr{
    padding-top:25px;
    padding-bottom:20px;
    width: 100%;              /* zaberie celú šírku rodiča */
    height: 300px;            /* výška */
    object-fit: cover;        /* obrázok sa oreže a vyplní priestor */
}

header nav ul {
    list-style: none;        /* Zruší odrážky */
    padding: 0;              /* Zruší vnútorné odsadenie */
    display: flex;           /* Horizontálne menu */
    gap: 15px;               /* Medzery medzi položkami */
    justify-content: center; /* Centrovanie menu */
    margin: 10px 0 0 0;      /* Horný okraj */
    padding-bottom:20px;
}
header nav ul li a {
    color: white;           /* Farba odkazu */
    text-decoration: none;  /* Bez podčiarknutia */
    font-weight: bold;      /* bold text */
}
header nav ul li a:hover {
    color: yellow; /* zmení farbu pri kurzore */
}

h1 {
    font-size: 2em; /* Veľkosť */
    margin: 10px 0; /* hore dole 10 , v lavo/pravo 0 Odsadenie */
}
h2 {
    color: #6a1b9a; /* Farba nadpisov h2 */
    margin: 10px 0;  
}

main {
    max-width: 1000px; /* Maximálna šírka obsahu */
    margin: 20px auto; /* Centrovanie */
    padding: 0 10px;   /* Horizontálne odsadenie */
}
section, aside, article {
    background: #fff;    /* Biele pozadie */
    padding: 15px;       /* Vnútorný okraj */
    border-radius: 8px;  /* Zaoblené rohy */
    margin-bottom: 20px; /* Vonkajší okraj */
    border: 1px solid #ddd; /* Jednoduchý rám (splní border) */
}

.gridKnihy {
    display: grid; /* Grid rozloženie */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responzívne stĺpce */
    gap: 15px; /* Medzery medzi kartami */
}

article img {
    width: 100%;                     /* Plná šírka */
    height: 180px;                   /* Pevná výška */
    object-fit: cover;               /* Orezanie bez deformácie */
    border-radius: 6px;             
    border: 1px solid gray;          /* Rám obrázka */
    transition: transform 0.3s ease; /* Plynulý efekt */
}
article:hover img {
    transform: scale(1.25); 
}

/* ==================== Pätička ==================== */
footer {
    background: #6a1b9a;  /* pozadie pätičky farba */
    color: white;          /* Farba textu */
    padding: 15px;         /* Vnútorné odsadenie */
    margin-top: 20px;      /* Horný okraj */
}

/* ==================== Video a Audio ==================== */
aside video {
    border-radius: 5px;  /* Zaoblené rohy */
    margin: 10px 0;      /* Vertikálne odsadenie od textu */
    display: block;      /* Centrovanie */
    margin-left: auto;
    margin-right: auto;
}



audio {
    display: block;      /* Centrovanie audio prehrávača */
    margin: 10px auto;
}

 .podnadpis {
    font-size: 1.2em;
    color: orange;
    margin: 5px 0;
}

.tabulkaKnih {
    width: 100%;              /* šírka tabuľky nastavenie */
    border-collapse: collapse; /* Zlúčenie hraníc */
    margin-top: 20px;         /* Medzera nad tabuľkou */
    text-align: center;       /* Centrovanie textu */
}
.tabulkaKnih th, .tabulkaKnih td {
    padding: 10px;            /* Vnútorný okraj buniek */
    border: 1px solid #ccc;
}
.tabulkaKnih img {
    border: 1px solid #ccc;   /* Rámik okolo obrázkov */
    border-radius: 5px;       /* Zaoblené rohy */
}

.obalka-tab { 
    width: 80px;
    height: auto;
}

.video-ukazka { 
    width: 400px;
}