body {                                             /* HTML selektor - vsetko v body (text) */
    
    font-size: 18pt;                               /* Velkost pisma */

    background: #282828;                         /* Farba pozadia ( TMAVOSEDA) */
    
    color: white;                                /* Farba pisma (BIELA) */
}

/*=====================================================================================================================================================*/

img{                                               /* HTML selektor */
    
    width: 150px;                                  /* Sirka obrazka */
    
    float: right;                                  /* Umiestni na pravu stranu, ostatny obsah ho obtaca z lava */ 
}

/*=====================================================================================================================================================*/

h1{
    font-size: 50pt;                              /* Velkost pisma */
}
 
/*=====================================================================================================================================================*/

nav ul {                                         
 
  list-style: none;                               /* Odstráni odrážky */
 
  padding: 0;                                     /* Vnútorné odsadenie */ 
 
  margin: 0;                                      /* Vonkajšie odsadenie */
 
  display: flex;                                  /* Dá ich vedľa seba */
 
  justify-content: center;                        /* Zarovná do stredu, môžeš zmeniť na left/right */
 
  gap: 30px;                                      /* Medzery medzi položkami */
}

/*=====================================================================================================================================================*/

nav li a {
    
  color: white;                                 /* farba textu */

  text-decoration: none;                          /* odstráni podčiarknutie */

  font-size: 18px;                                /* veľkosť písma */

  font-weight: 500;                               /* mierne hrubšie písmo */

  transition: color 0.3s ease;                    /* plynulá zmena farby pri hoveri */
}

/*=====================================================================================================================================================*/

nav li a:hover {                                  /* Pseudo tireda : hover */

  color: #00bfff;                               /* farba po nabehnutí kurzora (napr. modrá) */
}

/*=====================================================================================================================================================*/

#mapa-kontaktov {                                  /* ID selektor */
   
    float: left;                                   /* Umiestni na lavu stranu, ostatny obsah ho obtaca z prava */ 
   
    width: 450px;                                  /* Vyska obrazka */ 
   
    margin-right: 20px;                            /* Vonkajšie odsadenie napravo */

    overflow: auto;                                /* Ak obsah presahuje rozmery elementu, prehliadač automaticky pridá medzeru */
}

/*=====================================================================================================================================================*/

#mapa-kontaktov h2 {                               /* ID selektor */
  
    text-align: left;                              /* Zarovnanie textu ( left - nalavo) */
}

/*=====================================================================================================================================================*/

footer {
   
    text-align: center;                            /* Zarovnanie textu ( left - nalavo) */

    padding: 20px 0;                               /* Vnútorné odsadenie */
}

/*=====================================================================================================================================================*/

#peta {                                            /*  ID selektor  */
   
    text-decoration: underline;                    /* Dekoracia pety (podcisrknutie)  */
}

/*=====================================================================================================================================================*/

.odkaz{                                            /* CLASS selektor */
   
    text-decoration: underline;                    /* Dekoracia pety (podcisrknutie)  */
}

/*=====================================================================================================================================================*/

.karta {                                           /* CLASS selektor */

  padding: 1px 2px;                                /*oramovanie index.html*/

  border: 3px solid #ccc;                        /* Hore 10px, Vpravo 20px, Dole 10px, Vľavo 20px */

}

/*=====================================================================================================================================================*/

.odsek {
  
    margin: 1.5em;                                /* Oddeľ odsek od všetkých okolitých elementov 1.5em priestorom */

    padding: 10px;                                /* Vnútorné odsadenie */

    border: 1px solid black;                    /* Pre porovnanie: vnútorný okraj */
}

/*=====================================================================================================================================================*/

.projekt-obrazok {                                /* Základný štýl pre obrázky projektov */

    transition: transform 0.3s ease-in-out;       /* Nastaví plynulú animáciu pre transformáciu  */

    width: 350px;                                 /* Sirka obrazkovej mapy */

    height: auto;                                 /* Vyska obrazkovej mapy */
    
    display: block;                               /* Zabezpeč zväčšenie bude vyzerať dobre */

    margin: 10px auto;                            /* Vycentruje obrázok */
    
    border-radius: 35px;                          /* Zaoblenie rohov obrazku */
}

/*=====================================================================================================================================================*/

.projekt-obrazok:hover {                           /* Pseudo-trieda :hover - aplikuje sa, keď je kurzor myši nad elementom */

    transform: scale(1.4);                         /* Zväčší obrázok o 30% (hodnota 1.3 znamená 130% pôvodnej veľkosti) */

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);   /* Obrázok pomocou tieňa, čo zvýrazní efekt */

    z-index: 10;                                   /* Zabezpečí, že transformácia bude viditeľná aj nad inými prvkami */
}

/*=====================================================================================================================================================*/

#mapa-img {
    
    width: 450px;                                  /* Sirka */

    height: auto;                                  /* VYska (automaticky) */

    display: block;                                /* Správa ako blokový element */

    margin: 0 auto;                                /* Vonkajšie odsadenie ( automaticky */

    text-align: left;                              /* Zarovnanie textu ( left - nalavo) */

    border-radius: 66px;                           /* Zaoblenie vsetkych rohov */

transition: transform 0.3s ease-in-out;            /* Definuje plynulú zmenu vizuálnych stavov (animáciu) */
}

/*=====================================================================================================================================================*/

.zvuk {                                            

   background-color: #282835;                    /* Farba pozadia */

   margin: 10px;                                   /* Vonkajšie odsadenie */

   padding: 10px;                                  /* Model krabice */
}

/*=====================================================================================================================================================*/

.mp4 {                                             /* CLASS, vyska a sirka obrazku */

    height: 300px;

    width: 300px;
}

/*=====================================================================================================================================================*/

.text {                                            /* CLASS, styl pisma */

    font-family: Arial, Helvetica, sans-serif;
}

/*=====================================================================================================================================================*/
Table {                                         /* Základné nastavenie pre tabuľku a bunky */

    border-collapse: collapse;                  /* Uistí sa, že okraje buniek sa spoja do jedného okraja tabuľky */

    border: 7px solid black;                  /* Čierny okraj po celom obvode tabuľky + sirka okrajov */

    width: 40%;                                 /* šírka tabulky */
    
  /*  margin: 20px center;                          /* Vycentrovanie tabuľky na stred stránky */
    float: right;
}

/*=====================================================================================================================================================*/

th, td {                                        /* Nastavenie okraja a odsadenia pre všetky bunky (hlavička aj telo) + bunky osadene nalavo */

    border: 3px solid black;
    
    padding: 10px;
    
    text-align: center;
    
    color: black;
    
    vertical-align: middle;
    
    font-size: 35px;
}

/*=====================================================================================================================================================*/

tbody tr:nth-child(odd) {                      /* 1. Podmienka: Každý nepárny riadok bude biely (predvolené, ale explicitné nastavenie) */

    background-color: wheat;                 /* :nth-child(odd) cielí na 1., 3., 5. (neparne riadky) atď. */
}

/*=====================================================================================================================================================*/

tbody tr:nth-child(even) {                     /* 2. Podmienka: Každý párny riadok bude bledo šedý */
                                               /* :nth-child(even) cielí na 2., 4., 6.(parne riadky) atď. */
    
    background-color: #999999;               /* Pozadie šedá farba */
}

/*=====================================================================================================================================================*/

thead {                                        /* Štylovanie hlavičky tabuľky (pozadie a text - farba) */

    background-color: #999999; 
   
    color: white;
}

/*=====================================================================================================================================================*/

th:first-child,td:first-child {               /* Cielime na hlavičku prvého stĺpca a na prvú bunku v každom riadku */

    width: 150px;                             /* Nastavte šírku, ktorá je väčšia ako 100px. Vytvorí sa priestor pre centrovanie. */
}

/*=====================================================================================================================================================*/