/* import pisma z google fonts */
@import url('https://fonts.googleapis.com/css2?family=open+sans:ital,wght@0,300..800;1,300..800&display=swap');

/* zakladne styly pre body */
body {
    display: flex; /* pouzije flexbox na usporiadanie */
    flex-direction: column; /* usporiada prvky do stlpca */
    margin: 0; /* odstrani vonkajsie okraje */
    padding: 0; /* odstrani vnutorne odsadenie */
    background-color: #e9eff4; /* farba pozadia */
    font-family: 'open sans', sans-serif; /* pouzite pismo */
    color: white; /* farba textu */
    min-height: 100vh; /* minimalna vyska na celu vysku obrazovky */
}

/* styl pre hlavny obsah */
main {
    flex-grow: 1; /* rozsiri hlavny obsah na volny priestor */
    margin: 0; /* odstrani vonkajsie okraje */
    padding: 0; /* odstrani vnutorne odsadenie */
}

/* styl pre uvodnu sekciu */
.uvod-sekcia {
    text-align: center; /* zarovna text na stred */
}

/* styl pre nadpis v uvodnej sekcii */
.uvod-sekcia h1 {
    font-size: 2rem; /* velkost pisma */
}

/* styl pre obrazok v uvodnej sekcii */
#obrazkuvod {
    height: 150px; /* vyska */
    padding-left: 50px; /* vnutorne odsadenie zlava */
    background: #003366; /* farba pozadia */
    display: flex; /* pouzije flexbox na usporiadanie */
    flex-direction: column; /* usporiada prvky do stlpca */
    align-items: flex-start; /* zarovna prvky vlavo */
    justify-content: center; /* zarovna obsah na stred */
}

/* styl pre obrazok v #obrazkuvod */
#obrazkuvod > img {
    position: absolute; /* absolutna pozicia */
    right: 0; /* zarovnanie napravo */
    height: 150px; /* vyska obrazka */
    background-color: #194775; /* farba pozadia */
}

/* styl pre text v #obrazkuvod */
#obrazkuvod > p {
    max-width: 50%; /* maximalna sirka textu */
}

/* styl pre trojsekciu */
.trojsekcia {
    margin-top: 76px; /* horny okraj */
    text-align: center; /* zarovna text na stred */
    transition: background-color 0.3s ease, transform 0.2s ease; /* animacie */
    color: black; /* farba textu */
    margin-left: 15px; /* vonkajsi okraj zlava */
    margin-right: 15px; /* vonkajsi okraj zprava */
}

/* styl pre vnutornu trojsekciu */
.vnutrotrojsekcia {
    margin-top: 76px; /* horny okraj */
    display: flex; /* pouzije flexbox na usporiadanie */
    justify-content: center; /* zarovna prvky na stred */
    width: 100%; /* sirka na celu sirku rodica */
    gap: 50px; /* medzery medzi prvkami */
    flex-wrap: wrap; /* umozni zalomenie prvkov na dalsi riadok */
}

/* styl pre jednotlive sekcie */
.sekcia {
    display: flex; /* pouzije flexbox na usporiadanie */
    flex-direction: column; /* usporiada prvky do stlpca */
    justify-content: space-between; /* rozlozi prvky s medzerami medzi nimi */
    background-color: #b2c1d1; /* farba pozadia */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* tien */
    overflow: hidden; /* skryje pretiekajuci obsah */
    padding: 20px; /* vnutorne odsadenie */
    text-align: center; /* zarovna text na stred */
    transition: background-color 0.3s ease, transform 0.2s ease; /* animacie */
    flex: 3; /* flexibilna sirka */
    max-width: 400px; /* maximalna sirka */
    min-height: 250px; /* minimalna vyska */
    border-radius: 1rem; /* zaoblenie rohov */
}

/* hover efekt pre sekcie */
.sekcia:hover {
    background-color: #ccd6e0; /* zmeni farbu pozadia pri hoveri */
    transform: scale(1.02); /* zvacsi sekciu */
}

/* aktivny stav sekcie */
.sekcia:active {
    background-color: #ccd6e071; /* zmeni farbu pozadia pri kliknuti */
    transform: scale(0.98); /* zmensi sekciu */
}

/* styl pre nadpis v sekcii */
.sekcia h2 {
    color: black; /* farba textu */
    font-size: 22px; /* velkost pisma */
    margin-bottom: 10px; /* spodny okraj */
}

/* styl pre text v sekcii */
.sekcia p {
    font-size: 16px; /* velkost pisma */
    color: black; /* farba textu */
    margin-bottom: auto; /* automaticky spodny okraj */
}

/* styl pre tlacidlo v sekcii */
.sekcia .btn {
    display: flex; /* pouzije flexbox na usporiadanie */
    background-color: #194775; /* farba pozadia */
    color: white; /* farba textu */
    padding: 12px 20px; /* vnutorne odsadenie */
    font-size: 1.5rem; /* velkost pisma */
    text-decoration: none; /* odstrani podciarknutie */
    transition: background-color 0.3s ease, transform 0.2s ease; /* animacie */
    border-radius: 1rem; /* zaoblenie rohov */
    align-self: center; /* zarovna tlacidlo na stred */
}

/* hover efekt pre tlacidlo */
.sekcia .btn:hover {
    background-color: #4c7093; /* zmeni farbu pozadia pri hoveri */
}

/* aktivny stav tlacidla */
.sekcia .btn:active {
    background-color: #002d5b; /* zmeni farbu pozadia pri kliknuti */
    transform: scale(0.95); /* zmensi tlacidlo */
}

/* styl pre zoznam autorov */
.zoznam_autorov {
    color: black; /* farba textu */
    max-width: 70%; /* maximalna sirka */
    background-color: #b2c1d1; /* farba pozadia */
    padding: 20px; /* vnutorne odsadenie */
    border-radius: 1rem; /* zaoblenie rohov */
    margin: 0 auto; /* centrovanie */
    margin-top: 50px; /* horny okraj */
}

/* styl pre uvodnu sekciu */
.uvod-sekcia {
    margin-top: 50px; /* horny okraj */
    margin-bottom: 50px; /* spodny okraj */
}

/* styl pre otazky */
.otazky {
    text-align: center; /* zarovna text na stred */
    color: black; /* farba textu */
    display: flex; /* pouzije flexbox na usporiadanie */
    flex-direction: column; /* usporiada prvky do stlpca */
    justify-content: center; /* zarovna obsah na stred */
    transform: scale(4); /* zvacsi obsah */
}

/* styl pre testovaciu sekciu */
.test-sekcia {
    margin-top: 50px; /* horny okraj */
    margin-bottom: 50px; /* spodny okraj */
    display: flex; /* pouzije flexbox na usporiadanie */
    justify-content: center; /* zarovna prvky na stred */
    gap: 50px; /* medzery medzi prvkami */
    flex-wrap: wrap; /* umozni zalomenie prvkov na dalsi riadok */
}

/* styl pre testovaci prvok */
.test {
    background-color: #f3f1e7; /* farba pozadia */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* tien */
    overflow: hidden; /* skryje pretiekajuci obsah */
    padding: 20px; /* vnutorne odsadenie */
    text-align: center; /* zarovna text na stred */
    transition: background-color 0.3s ease, transform 0.2s ease; /* animacie */
}

/* responzivne styly pre obrazovky s max. sirkou 768px */
@media (max-width: 768px) {
    .uvod-sekcia h1 {
        font-size: 1.5rem; /* zmensi velkost pisma */
    }

    .uvod-sekcia {
        width: 100%; /* sirka na celu sirku rodica */
    }

    .uvod-sekcia p {
        font-size: 0.9rem; /* zmensi velkost pisma */
        margin: 10px 30px 0px 30px; /* nastavi okraje */
    }

    .trojsekcia {
        flex-direction: column; /* usporiada prvky do stlpca */
        text-align: center; /* zarovna text na stred */
    }

    .vnutrotrojsekcia {
        flex-direction: column; /* usporiada prvky do stlpca */
        align-items: center; /* zarovna prvky na stred */
    }

    .sekcia {
        padding: 15px; /* vnutorne odsadenie */
        text-align: center; /* zarovna text na stred */
        width: 90%; /* sirka na 90% rodica */
    }

    .sekcia h2 {
        font-size: 20px; /* velkost pisma */
    }

    .sekcia p {
        font-size: 14px; /* velkost pisma */
    }

    .sekcia .btn {
        padding: 10px 15px; /* vnutorne odsadenie */
        font-size: 20px; /* velkost pisma */
    }
}

/* responzivne styly pre obrazovky s max. sirkou 1000px */
@media screen and (max-width: 1000px) {
    #obrazkuvod > p {
        max-width: 100%; /* maximalna sirka textu */
        margin-right: 15px; /* vonkajsi okraj zprava */
        font-size: 1rem; /* velkost pisma */
    }
}

/* responzivne styly pre obrazovky s max. sirkou 520px */
@media screen and (max-width: 520px) {
    #obrazkuvod > p {
        font-size: 14px; /* zmensi velkost pisma */
    }
}

/* styl pre obtekajuci obrazok */
.obtekajuci-obrazok {
    float: left; /* obtekanie vlavo */
    margin-right: 15px; /* vonkajsi okraj zprava */
    margin-bottom: 10px; /* spodny okraj */
    max-width: 40%; /* maximalna sirka */
    height: 225px; /* vyska */
    border-radius: 10px; /* zaoblenie rohov */
}


.btn-pdf {
    background-color: #194775;
    color: white;
    padding: 12px 20px;
    font-size: 1.5rem;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border-radius: 1rem; 
    max-width: 300px;
}


.btn-pdf:hover {
    background-color: #4c7093;
}

.btn-pdf:active {
    background-color: #002d5b;
    transform: scale(0.95);
}