body {
    font-family: 'Arial', sans-serif; /* Nastavenie pisma pre cele tele stranky */
    margin: 0; /* Zrusi okraje */
    padding: 0; /* Zrusi vnutorne odsadenie */
    color: #333; /* Farba pisma*/
    line-height: 1.6; /* Riadkovanie*/
    background-color: #f9f9f9; /* Farba pozadia */
}

.header1 {
    text-align: center; /* Centrovanie textu */
    background-color: #006d77;; /* Farba pozadia */
    color: white; /* Urcuje farbu */
    padding: 15px 0; /* Nastavi vnutorne odsadenie zhora a zdola na 15px a zrusi vnutorne odsadenie sprava a zlava. */
    box-shadow: 0 4px 6px dimgray;/* Prida tiene okolo elementu */
    text-align: center; /* Zarovnanie textu na stred */
}

.navbar {
    display: flex; /* zmeni rozloženie nav na flexbox container */
    justify-content: center; /* Horizontalne zarovnanie na stred */
    align-items: center; /* Vertikalne zarovnanie na stred */
    background-color: #006d77; /* Farba pozadia */
}

.navbar ul {
    list-style-type: none; /* Odstranenie predvoleného stylu zoznamu. */
    padding: 0; /* Zrusi vnutorne odsadenie */
    margin: 0; /* Zrusi okraje */
    display: flex; /* Vytvori flex kontajner */
    justify-content: center; /* horizontálne zarovnanie poloziek kontajnera na stred */
    align-items: center; /* vertikalne zarovnanie poloziek kontajnera na stred */
    gap: 20px; /* Nastavi odstup medzi polozkami na 20px */
}

.navbar li {
    margin: 0; /* Zrusi okraje */
}

.navbar img {
    vertical-align: middle; /* Vertikalne zarovnanie na stred v ramci riadku */
    max-width: 50px; /*Urci maximalnu sirku na 50px*/
    border-radius: 50%; /* Zaoblenie obrazka loga */
    box-shadow: 0 2px 4px dimgray; /* Prida tiene okolo elementu */
}

.navbar li a {
    text-decoration: none; /* Odstranuje dekoracie textu */
    font-weight: bold; /* Nastavenie tucného textu */
    color: white; /* Urcuje farbu */
    font-size: 1em; /* Velkost pisma */
    padding: 5px 10px; /* Prida vnutorný okraj */
    transition: color 0.3s; /* Pridava animaciu pri zmene farby textu a pozadia. Ak sa zmeni farba textu alebo pozadia, zmena sa uskutocni za 0.3 sekundy. */
}
.navbar li a:hover {
    background-color: white; /* Farba pozadia */
    color: #006d77; /* Urcuje farbu */
    border-radius: 5px; /* Zaoblenie rohov */
}

.header2 {
    background-color: darkcyan; /* Farba pozadia */
    color: whitesmoke; /* Urcuje farbu */
    padding: 40px 20px; /* Prida vnutorný okraj */
    text-align: center; /* Zarovnanie textu na stred */
}

h1 {
    font-size: 3.5em; /* Velkost pisma */
    margin-bottom: 10px; /* Nastavuje spodny vonkajsi okraj elementu */
    font-family: 'Georgia', serif; /* Urcenie motivu pisma */
}

cite {
    font-size: 1.5em; /* Velkost pisma */
    font-style: italic; /* Nastavuje text na kurzivu */
    opacity: 0.9; /* urcuje priehladnost */
}

/* Sekcie */
section {
    background-color: white; /* Farba pozadia */
    padding: 20px; /* Prida vnutorný okraj */
    border-radius: 10px; /* Zaoblenie rohov */
    margin: 20px auto; /* automatické zarovnanie */
    max-width: 800px; /* nastavuje maximalnu sirku */
    box-shadow: 0 4px 6px dimgray; /* Pridava jemný tieň okolo bloku citátu */
}

.p {
    font-size: 1.2em; /* Velkost pisma */
    line-height: 1.8; /* Riadkovanie*/
    color: #444; /* Urcuje farbu */
    text-align: justify; /* zarovnanie textu */
}
h2 {
    text-align: center; /* Zarovnanie textu na stred */
    background-color: darkcyan; /* Farba pozadia */
    color: whitesmoke; /* Urcuje farbu */
}
h3{
    color: darkcyan; /* Urcuje farbu */
    border-bottom: 2px solid #006d77; /* pridanie spodneho rámčeka (okraja) k elementu */
    padding-bottom: 5px; /* Prida spodny vnutorný okraj */
    margin-bottom: 15px; /* Medzera pod elementom */
}
h4{
    font-weight: bold; /* nastavenie tučcneho pisma pre text */
}

h5{
    font-style: italic; /* Nastavuje text na kurzivu */
}

.ul{
    list-style-type: circle; 
    font-size: 1.2em; /* Velkost pisma */
}
.ul i{
    margin-bottom: 10px; /* Medzera pod elementom */
    position: relative; /* Urcuje ako bude element umiestneny */
    padding-left: 25px; /* Prida lavy vnutorný okraj */
}

blockquote{
    font-style: italic; /* Nastavuje text na kurzivu */
    background-color: #f0f0f0; /* Farba pozadia */
    padding: 20px; /* Pridava vnútorné odsadenie */
    margin: 20px 0; /* Prida okraje */
    font-size: 1.2em; /* Zvysi velkost textu */
    color: #444; /* Farba */
    line-height: 1.6; /* Zvysenie medzier medzi riadkami */
    box-shadow: 0 4px 6px dimgray; /* Pridava tieň okolo bloku citátu */
    border-radius: 8px; /* Zaobľuje rohy */
    text-align: center; /* Zarovnanie textu na stred */
}

.img{

    height: 200px; /* Vyska obrazka */
    border-radius: 8px; /* Zaoblenie rohov */
    margin: 0 15px; /* Prida okraje */
    margin-bottom: 15px; /* Nastavuje spodny vonkajsi okraj */
    text-align: center; /* Zarovnanie textu na stred */
}
.img:hover {
    transform: translateY(-5px); /* Posuva element vertikalne */
}

mark {
    background-color:rgb(214, 200, 200);  /* Nastavi pozadie na biele */
    font-size: 1.2em;  /* Zvysi velkost pisma */
    padding: 5px;  /* Prida vnutorný okraj */
    display: inline-block;  /* Nastavi zobrazenie ako inline-block */
    margin-bottom: 10px;  /* Medzera pod elementom */
    border-radius: 8px;  /* Zaoblenie rohov */
}
.baliky {
    list-style-type: none; /* Zrusi predvolene bodky */
    padding-left: 20px; /* Odsadenie zoznamu */
}

div {
    background-color: #f0f8ff; /* Farba pozadia */
    padding: 15px; /* Prida vnutorný okraj */
    border-radius: 8px; /* Zaoblenie rohov */
    margin-bottom: 15px; /* Medzera pod elementom */
}
#footer { 
    text-align: center; /* Zarovnanie textu na stred */
    background-color: #006d77; /* Farba pozadia */
    color: white; /* Urcuje farbu */
    padding: 10px 0; /* Prida vnutorný okraj */
    font-size: 0.9em; /* Velkost pisma */
    margin-top: 20px; /* Medzera nad elementom */
}
.scroll-to-top {
    position: fixed; /* Urcuje ako bude element umiestneny */
    bottom: 20px; /* Urcuje vzdialenost elementu od spodnej hrany okna prehliadaca */
    right: 20px; /* Urcuje vzdialenost elementu od pravej hrany okna prehliadaca */
    background-color: darkcyan; /* Farba pozadia */
    color: white; /* Urcuje farbu */
    font-size: 24px; /* Velkost pisma */
    padding: 15px; /* Prida vnutorný okraj */
    border-radius: 50%; /* Zaoblenie rohov */
    text-align: center; /* Zarovnanie textu na stred */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Pridava jemný tieň okolo bloku citátu */
    cursor: pointer; /* urcuje, aky kurzor sa zobrazi, ked pouzivatel prejde mysou nad elementom */
    transition: background-color 0.3s; /* Ak sa zmeni farba pozadia, zmena sa uskutocni za 0.3 sekundy. */
    text-decoration: none; /* Odstranuje dekoracie textu */
}

.scroll-to-top:hover {
    background-color: #0056b3; /* Farba pozadia */
}

.scroll-to-top.hidden {
    display: none; /* Skrytie šípky, kým nie je posunutá na dolnú časť */
}


hr{
    border: 2px solid darkcyan; /* nastavi sirtku, typ a farbu ramceka (border) */
}
form{
    max-width: 600px; /* nastavuje maximalnu sirku */
    margin: auto; /* automatické zarovnanie */
}
.a{
    color: darkcyan; /* Urcuje farbu */
}
button{
    background-color: darkcyan; /* Farba pozadia */
    color: white; /* Farba */
    padding: 10px 20px; /* Prida vnutorný okraj */
    border: none; /* zruší ramcek (border) okolo elementu */
    border-radius: 5px; /* zaokrúhli rohy elementu */
    cursor: pointer; /*kurzor myši na "rukavicu" (pointer) */
    font-size: 1.1em; /* Velkost pisma */
    margin-top: 10px; /* Medzera nad elementom */
}
.input{
    width: 100%; /* nastavuje sirku */
    padding: 10px; /* Prida vnutorný okraj */
    margin-bottom: 10px; /* Medzera pod elementom */
    border-radius: 5px; /* Zaoblenie rohov */
    border: 1px solid #ccc; /* nastavi sirtku, typ a farbu ramceka (border) */
}