/* vseobecne nastavenia */
body {
    font-family: 'georgia', serif; /* pouzite pismo */
    line-height: 1.6; /* vyska riadku */
    margin: 0; /* odstrani vonkajsie okraje */
    padding: 0; /* odstrani vnutorne odsadenie */
    background-color: #e9eff4; /* farba pozadia */
    color: black; /* farba textu */
    min-height: 100vh; /* minimalna vyska na celu vysku obrazovky */
    display: flex; /* pouzije flexbox na usporiadanie */
    flex-direction: column; /* usporiada prvky do stlpca */
}

/* styl pre hlavny obsah */
main {
    padding: 40px 20px; /* vnutorne odsadenie */
    max-width: 1200px; /* maximalna sirka */
    margin: 0 auto; /* centrovanie */
    text-align: center; /* zarovna text na stred */
    flex-grow: 1; /* rozsiri hlavny obsah na volny priestor */
}

/* styl pre nadpis h1 */
h1 {
    font-size: 36px; /* velkost pisma */
    color: #000000; /* farba textu */
    text-align: center; /* zarovna text na stred */
    margin-bottom: 40px; /* spodny okraj */
    text-transform: uppercase; /* velke pismena */
}

/* styl pre testovaci kontajner */
.test-container {
    display: flex; /* pouzije flexbox na usporiadanie */
    flex-direction: column; /* usporiada prvky do stlpca */
    align-items: center; /* zarovna prvky na stred */
    justify-content: center; /* zarovna obsah na stred */
    width: 100%; /* sirka na celu sirku rodica */
}

/* styl pre test */
.test {
    background-color: #b2c1d1; /* farba pozadia */
    padding: 60px; /* vnutorne odsadenie */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* tien */
    border-radius: 10px; /* zaoblenie rohov */
    margin-bottom: 20px; /* spodny okraj */
    width: 100%; /* sirka na celu sirku rodica */
    max-width: 900px; /* maximalna sirka */
}

/* styl pre kontajner otazok */
.question-container {
    display: flex; /* pouzije flexbox na usporiadanie */
    flex-direction: column; /* usporiada prvky do stlpca */
    gap: 40px; /* medzery medzi prvkami */
}

/* styl pre jednotlive otazky */
.question {
    background-color: #ccd6e0; /* farba pozadia */
    padding: 30px; /* vnutorne odsadenie */
    border-radius: 8px; /* zaoblenie rohov */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* tien */
    text-align: center; /* zarovna text na stred */
    font-size: 26px; /* velkost pisma */
}

/* styl pre odpovede */
.answer {
    background-color: #e9eff4; /* farba pozadia */
    border-radius: 8px; /* zaoblenie rohov */
    padding: 20px; /* vnutorne odsadenie */
    cursor: pointer; /* zmeni kurzor na ruku */
    font-size: 22px; /* velkost pisma */
    transition: background-color 0.3s; /* animacia pre hover efekt */
}

/* hover efekt pre odpovede */
.answer:hover {
    background-color: #b2c1d1; /* zmeni farbu pozadia pri hoveri */
}

/* styl pre vybratu odpoved */
.answer.selected {
    background-color: #4c7093; /* farba pozadia */
    color: white; /* farba textu */
}

/* farebne oznacenie spravnych a nespravnych odpovedi */
.correct {
    color: #28a745; /* zelena pre spravne odpovede */
}

.incorrect {
    color: #dc3545; /* cervena pre nespravne odpovede */
}

/* styl pre navigacne tlacidla */
.navigation {
    display: flex; /* pouzije flexbox na usporiadanie */
    gap: 20px; /* medzery medzi tlacidlami */
    justify-content: center; /* zarovna tlacidla na stred */
    margin-top: 20px; /* horny okraj */
}

/* styl pre tlacidla */
button {
    padding: 20px 40px; /* vnutorne odsadenie */
    background-color: #194775; /* farba pozadia */
    color: white; /* farba textu */
    border: none; /* odstrani okraje */
    border-radius: 5px; /* zaoblenie rohov */
    cursor: pointer; /* zmeni kurzor na ruku */
    font-size: 22px; /* velkost pisma */
    transition: background-color 0.3s; /* animacia pre hover efekt */
}

/* hover efekt pre tlacidla */
button:hover {
    background-color: #003366; /* zmeni farbu pozadia pri hoveri */
}

/* styl pre vysledky testu */
.test-results {
    background-color: #f8d7da; /* farba pozadia */
    padding: 20px; /* vnutorne odsadenie */
    border-radius: 5px; /* zaoblenie rohov */
    margin-top: 20px; /* horny okraj */
    text-align: center; /* zarovna text na stred */
    font-size: 20px; /* velkost pisma */
    line-height: 1.4; /* vyska riadku */
}

/* styl pre nadpis v test-results */
.test-results h3 {
    font-size: 24px; /* velkost pisma */
    color: black; /* farba textu */
    margin-bottom: 10px; /* spodny okraj */
}

/* styl pre text v test-results */
.test-results p {
    margin: 10px 0; /* vonkajsie okraje */
    color: black; /* farba textu */
}

/* styl pre reset tlacidlo */
#resetbtn {
    margin-top: 20px; /* horny okraj */
    padding: 10px 30px; /* vnutorne odsadenie */
    background-color: #e74c3c; /* farba pozadia */
    color: white; /* farba textu */
    border-radius: 5px; /* zaoblenie rohov */
    font-size: 18px; /* velkost pisma */
    cursor: pointer; /* zmeni kurzor na ruku */
    transition: background-color 0.3s; /* animacia pre hover efekt */
}

/* hover efekt pre reset tlacidlo */
#resetbtn:hover {
    background-color: #c82333; /* zmeni farbu pozadia pri hoveri */
}

/* responzivne styly pre obrazovky s max. sirkou 790px */
@media (max-width: 790px) {
    body {
        font-size: 16px; /* zmensi velkost pisma */
    }

    .test {
        padding: 40px; /* zmensi vnutorne odsadenie */
    }

    h1 {
        font-size: 28px; /* zmensi velkost pisma */
    }

    .question-container {
        gap: 30px; /* zmensi medzery medzi prvkami */
    }

    .question {
        font-size: 22px; /* zmensi velkost pisma */
        padding: 20px; /* zmensi vnutorne odsadenie */
    }

    .answer {
        font-size: 18px; /* zmensi velkost pisma */
        padding: 15px; /* zmensi vnutorne odsadenie */
    }

    button {
        padding: 15px 30px; /* zmensi vnutorne odsadenie */
        font-size: 18px; /* zmensi velkost pisma */
    }
}

/* responzivne styly pre obrazovky s max. sirkou 620px */
@media (max-width: 620px) {
    body {
        font-size: 12px; /* zmensi velkost pisma */
    }

    .test {
        padding: 20px; /* zmensi vnutorne odsadenie */
    }

    .test-container {
        padding: 20px; /* pridane vnutorne odsadenie */
    }

    .test {
        width: calc(100% - 40px); /* upravena sirka */
    }
}

/* responzivne styly pre obrazovky s max. sirkou 480px */
@media (max-width: 480px) {
    body {
        font-size: 14px; /* zmensi velkost pisma */
    }

    .test {
        padding: 30px; /* zmensi vnutorne odsadenie */
    }

    .answer {
        font-size: 16px; /* zmensi velkost pisma */
        padding: 12px; /* zmensi vnutorne odsadenie */
    }

    button {
        padding: 12px 24px; /* zmensi vnutorne odsadenie */
        font-size: 16px; /* zmensi velkost pisma */
    }
}

/* responzivne styly pre obrazovky s max. sirkou 350px */
@media (max-width: 350px) {
    body {
        font-size: 14px; /* zmensi velkost pisma */
    }

    .test {
        padding: 30px; /* zmensi vnutorne odsadenie */
    }

    .answer {
        font-size: 16px; /* zmensi velkost pisma */
        padding: 12px; /* zmensi vnutorne odsadenie */
    }

    button {
        padding: 6px 12px; /* zmensi vnutorne odsadenie */
        font-size: 14px; /* zmensi velkost pisma */
    }
}