/* telo stranky */
body 
{
    background: #706f6f; /* farba pozadia */
}

/* hlavicka stranky */
header 
{
    background: #35424a;  /* farba pozadia */
    display: flex; /* flexbox pre flexibilne usporiadanie */
    justify-content: center; /* pre horizontalne centrovanie */
    height: 100px; /* nastavenie vysky */
}

/* navigacny panel */
nav 
{
    display: flex; /* flexbox pre usporiadanie do riadku */
    align-items: center; /* pre vertikalne vycentrovanie oddelovacov */
    gap: 40px; /* medzera medzi prvkami */
    color: white; /* farba oddelovacov */
}

/* navigacny panel - odkazy */
nav a 
{
    color: white; /* farba pisma */
    font-size: 18px; /* velkost pisma */
}

/* navigacny panel - obrazok (logo) */
nav img 
{
    all: unset; /* vyresetuje nastavenia od parenta */
    transition: transform 0.2s ease, box-shadow 0.3s ease; /* za aku dobu sa ma zvacsit */
}

/* zvacsovaci efekt */
nav img:hover 
{
    transform: scale(1.2); /* o kolko sa ma zvacsit */
  }

/* hlavny obsah stranky */
main 
{
    font-family: cursive; /* nastavenie pisma */
    padding: 20px; /* vnutorny okraj */
    text-align: center; /* vycentrovanie textu */
    background: white; /* nastavenie pozadia */
    margin: 20px auto; /* vonkajsi okraj  */
    max-width: 1200px; /* nastavenie maximalnej sirky */
    border-radius: 8px; /* zaoblenie rohov */
}

/* nadpis druhej urovne v main */
main h2 
{
    margin-bottom: 20px; /* vonkajsi spodny okraj */
    color: #f89500; /* farba pisma */
}

/* zvyraznovac */
mark 
{
    background-color: orange; /* farba pozadia */
}

/* element id="zaciatok" */
#zaciatok 
{
    background-color: grey; /* farba pozadia */
    color: white; /* farba pisma */
}

/* nastavenie obrazkov */
img 
{
    border-radius: 20px; /* zaoblenie rohov */
    margin-bottom: 20px; /* vytvori medzeru pod objektom */
}

/* obrazkova mapa */
img[usemap="#obrazkova_mapa"] 
{
    width: 600px; /* sirka */
    margin: 40px; /* vonkajsi okraj */
    padding: 10px; /* vnutorny okraj */
    border: 5px solid #35424a; /* ram */
    border-radius: 10px; /* zaoblenie ramu */
    float: right;
}

/* iframe */
iframe 
{
    width: 100%; /* sirka */
}

/* zoznam hlavneho obsahu stranky */
main ol 
{
    display: flex; /* flexbox pre usporiadanie do riadku */
    flex-wrap: wrap; /* zalomenie do noveho riadku */
    justify-content: space-around; /* rovnomerne vyrovna obrazky */
    gap: 10px; /* medzera medzi obrazkami */
}
  
/* obrazky z tabulky hlavneho obsahu */
main ol li img 
{
    width: 300px; /* sirka */
    height: 600px; /* vyska */
    transition: transform 0.2s ease; /* za aku dobu sa ma zvacsit */
}
  
/* zvacsovaci efekt */
main ol li img:hover 
{
    transform: scale(1.1); /* o kolko sa ma zvacsit */
}

/* bocny obsah stranky */
aside 
{
    background: #35424a; /* farba pozadia */
    padding: 15px; /* vnutorny okraj */
    border-radius: 8px; /* zaoblenie rohov */
    margin: 20px auto; /* vonkajsi okraj */
    max-width: 1200px; /* maximalna sirka */
    text-align: left; /* zarovnanie obsahu vlavo */
    color: white /* farba pisma */
}

/* nastavenie stylov pre audio a video */
aside audio 
{
    margin: 20px 0; /* vonkajsi okraj */ 
}

aside video 
{
    margin: 20px 0; /* vonkajsi okraj */
    width: 300px; /* sirka */
}

/* pata stranky */
footer 
{
    background: #35424a; /* nastavenie pozadia */
    color: #ffffff; /* nastavenie farby pisma */
    text-align: center; /* vycentrovanie textu */
    padding: 10px 0; /* vnutorny okraj */
    font-size: 14px; /* nastavenie velkosti pisma */
}