/* selektor html */
html {
    background-color: #f5f5f5;              /* farba pozadia */
}

/* selektor body */
body {
    margin: 0 auto;
    width: 71%;                             /* sirka a flex kontajner */
    padding: 2%;
    font-family: Arial, sans-serif;
    background-color: #e8f5e9;
    color: #000000;
    display: flex;
    flex-wrap: wrap;                        /* zalamovanie ak sa nemestia vedla seba */
    gap: 20px;                              /* medzera */
}

body > :not(main):not(aside) {
    flex-basis: 100%;                       /* vsetko okrem main/aside na 100% */
}

/* main a aside vedla seba */
body > main {
    flex: 1;                                /* zaberie zvysny priestor */
    min-width: 0;
    background-color: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
}

body > aside {
    flex-basis: 30%;                        /* fixna sirka 30% */
    flex-shrink: 0;                         /* nebude sa zmensovat */
    background-color: #fff9c4;
    padding: 20px;
}

/* Header */
header {
    background-color: #c8e6c9;
    padding: 20px;
    margin-bottom: 20px;                    /* medzera pod hlavickou */
    text-align: center;                     /* zarovnanie loga na stred */
}

/* Horizontalne menu */
nav {
    background-color: #a5d6a7;
    padding: 10px;
    margin-bottom: 20px;
    border: 2px solid #66bb6a;
}

nav ul {
    display: flex;                          /* horizontalne zoradenie, justify-content: flex-end; Toto presunie polozky doprava */
    list-style: none;
    padding: 0;
    margin: 0;
}

nav li {
    padding: 10px;
    margin: 5px;
}

nav a {
    color: #1b5e20;                         /* farba textu menu */
    text-decoration: none;
    transition: 0.3s;                       /* plynuly prechod */
}

nav a:hover {
    color: #ffffff;
}

/* ID selektory */
#informacie, #obmedzenia, #kontakt {
    padding: 20px;
    margin-bottom: 20px;
}

#informacie {
    background-color: #f1f8e9;
    border-left: 5px solid #7cb342;
}

#obmedzenia {
    background-color: #fff9c4;
    border-left: 5px solid #fdd835;
}

#kontakt {
    background-color: #e1f5fe;
    border-left: 5px solid #29b6f6;
}

/* Multimedia */
#multimedia {
    text-align: center;
    padding: 20px;
}

#multimedia figure {
    display: inline-block;                  /* elementy vedla seba */
    margin: 10px 50px;
    text-align: center;
    vertical-align: middle;                 /* vycentrovane na stred */
}

#multimedia figcaption {
    margin-bottom: 10px;
    font-weight: bold;
}

#multimedia video {
    width: 500px;                           /* fixna sirka videa */
    max-width: 100%;                        /* responzivita */
    height: auto;
    border-radius: 8px;
}

#multimedia audio {
    width: 400px;                           /* fixna sirka audia */
    max-width: 100%;                        /* responzivita */
    border-radius: 8px;
}

/* Obrazky a efekty */
.main-img {
    max-width: 100%;
    height: auto;
    border: 3px solid #81c784;
    border-radius: 10px;
}

.main-img:hover {
    transform: scale(1.01);                 /* mierne zvacsenie */
}

main img[usemap] {
    border: 10px solid #4caf50;             /* ramik pre obrazkovu mapu */
}

.nav-logo {
    width: 80px;
    height: auto;
    border: 2px solid #66bb6a;
}

.nav-logo:hover {
    transform: scale(1.1);                  /* hover efekt loga */
}

.obtekanie {
    float: left;                            /* obtekanie textu sprava */
    max-width: 200px;
    margin: 0 15px 10px 0;                  /* odsadenie od textu */
    padding: 5px;
    border: 3px solid #388e3c;
}

.img-kompost
{
    width: 50px;
    height: auto;
    border: 2px solid #66bb6a;
}

ol.zoznam-pismena {
    list-style-type: upper-alpha; /* abeceda */
}

ol.zoznam-rimske {
    list-style-type: upper-roman; /*  rimske */
}

/* Tabulka */
table {
    width: 100%;
    border: 2px solid #81c784;
    margin: 20px 0;
}

th, td {
    padding: 10px;
    border: 1px solid #c8e6c9;
}

table img {
    max-width: 50px;                        /* limit velkosti v tabulke */
    height: auto;
}

/* Footer */
footer {
    background-color: #c8e6c9;
    padding: 20px;
    margin-top: 20px;                       /* horny okraj */
    border: 3px solid #81c784;
}

footer img {
    width: 70px;
    height: auto;
}