/* svetlo ružové pozadie a svetlo šedý text */
body {
    background-color: #f9c8d5; /* Veľmi svetlo ružová farba pozadia */
    color: #4a4a4a; /* Svetlo šedá farba písma pre lepšiu čitateľnosť */
    font-family: 'Arial', sans-serif; /* Použitie písma Arial */
    line-height: 1.6; /* Zlepšenie čitateľnosti nastavením riadkového výšky */
    margin: 0;
    padding: 0;
}

/* Nastavenie štýlov pre nadpisy */
h1, h2, h3 {
    color: #333333; /* Tmavo šedá farba pre nadpisy, aby boli výrazné */
}

/* Nastavenie štýlu pre odkazy */
a {
    color: #e74c3c; /* Jasná červená farba pre odkazy */
    text-decoration: none; /* Odstránenie podčiarknutia */
}

a:hover {
    color: #c0392b; /* Tmavšia červená farba pri prechode myšou */
}

/* Nastavenie základného tela stránky */
html, body {
    height: 100%; /* Aby sme zabezpečili, že telo bude mať celú výšku */
    margin: 0; /* Odstránenie predvolených okrajov */
    padding: 0; /* Odstránenie paddingu */
    display: grid; /* Zapnutie CSS Grid */
    place-items: center; /* Centrovanie vertikálne a horizontálne */
}

/* Nastavenie štýlov pre hlavný obsah */
.main-content {
    width: 80%; /* Nastavenie šírky na 80% */
    max-width: 1200px; /* Maximálna šírka */
    text-align: center; /* Text v strede */
}

/* Zvýraznenie obrázkov pri ukázaní myšou na všetkých stránkach */
img {
    transition: transform 0.3s ease; /* Hladký prechod pri zväčšovaní obrázka */
}

img:hover {
    transform: scale(1.1); /* Zväčšenie obrázka na 110% jeho pôvodnej veľkosti */
}

/* obtekanie textom */
img {
    border: 5px solid #333; /* Vonkajší okraj */
    padding: 10px; /* Vnútorný okraj medzi okrajom a obrázkom */
    float: left; /* Obrázok sa bude obtekať textom z pravej strany */
    margin-right: 20px; /* Medzera medzi obrázkom a textom */
    margin-bottom: 20px; /* Medzera medzi obrázkom a nasledujúcim obsahom */
}

/* Pre obrázky vpravo */
img.right {
    float: right; /* Obrázok sa bude obtekať textom z ľavej strany */
    margin-left: 20px; /* Medzera medzi obrázkom a textom */
}

/* Aby text prestal obtekať obrázok, keď sa používajú float */
.clear {
    clear: both; /* Zabezpečí, že ďalší obsah sa nezobrazí okolo obrázka */
}

/* Nastavenie štýlov pre mark */
mark {
    background-color: #ff69b4; /* Ružová farba pozadia */
    color: white; /* Farba textu na bielu */
}

/* Štýly pre navigáciu */
nav ul {
    list-style-type: none; /* Odstráni predvolené odrážky zo zoznamu */
    padding: 0;
    text-align: center; /* Centrovanie položiek */
}

nav li {
    display: inline-block; /* Položky budú zobrazené vedľa seba */
    margin-right: 20px; /* Medzera medzi položkami */
}

nav a {
    text-decoration: none; /* Odstráni podčiarknutie odkazu */
    color: white; /* Zmení farbu textu odkazu na bielu */
    background-color: pink; /* Farba pozadia pre odkaz */
    padding: 10px; /* Vnútorné okraje odkazu */
    border-radius: 5px; /* Zaoblené rohy */
}

nav a:hover {
    background-color: lightpink; /* Farba pozadia pri prechode myšou */
}

/* Štýly pre bežný usporiadaný zoznam (ol) */
ol {
    list-style-type: decimal; /* Predvolené číslovanie pre usporiadaný zoznam */
    padding-left: 20px; /* Medzera naľavo */
}

ol li {
    margin-bottom: 10px; /* Medzera medzi položkami */
}

/* Video štýl */
.video-container {
    text-align: center;
    margin-top: 40px;
}

.video-container h3 {
    font-size: 1.5em;
    margin-bottom: 20px;
}

video {
    max-width: 20%; /* Nastavenie šírky na 20% */
    height: auto; /* Výška sa automaticky prispôsobí podľa šírky */
    border-radius: 8px;
}

/* Základné štýly pre galériu */
.gallery-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.gallery-container h1 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 40px;
}

.gallery-container p {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 40px;
}

/* Štýly pre tabuľku */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

table th, table td {
    padding: 10px;
    text-align: center;
}

table img {
    width: 100%;
    height: auto;
    max-width: 300px;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

table img:hover {
    transform: scale(1.1);
}

/* Prispôsobenie pre mobilné zariadenia */
@media (max-width: 768px) {
    table {
        width: 100%;
    }

    table img {
        max-width: 100%;
    }
}

/* Pre odkazy pre "Napíš nám email" a "Zobraziť našich trénerov" */
a[href="mailto:info.aerialmovement@gmail.com"],
a[href="#nasiTreneri"] {
    color: #3498db; /* Modrá farba pre odkazy */
    text-decoration: none; /* Odstránenie podčiarknutia */
}

a[href="mailto:info.aerialmovement@gmail.com"]:hover,
a[href="#nasiTreneri"]:hover {
    color: #1d6fa5; /* Tmavšia modrá pri prechode myšou */
}

/* Pre nadpis "Naši tréneri" */
#nasiTreneri {
    color: #3498db; /* Modrá farba pre nadpis */
}

.logo {
    height: auto;
}

.map-iframe {
    border: 0;
    width: 100%;  /* Tento zápis zabezpečí, že mapa bude responsívna a prispôsobí sa šírke kontajnera */
    height: 450px;
}