html { /*smooth scoll pomocov kotvy*/
    scroll-behavior: smooth;
}

body{ /*nastavenie farby pozadia a zarovnanie okrajov*/
    margin: 0;
    padding: 0;
    background-color: #afafaf;
}

/*header*/ 

header{ /*nastavenie farieb headeru*/
    color: white;
    background-color: black;
}

/*nazov a logo*/
header .logoNazov{ /*zarovnanie kontajneru s logom a nadpisom*/
    display: flex;
    justify-content: center;
}

header img, header h1 { /*zarovnanie img a h1 v header*/
    display: inline-block;
    vertical-align: middle;
}

header .logoNazov a{  /*odstranenie text dekoracie z hlavneho nadpisu*/
    text-decoration: none;
    color: white;
}

header .logoNazov h1{  /*zmena velkosty, zarovnanie z obrazkom a fontu pisma h1 (na Great Vibes, Google fonts, v subore style)*/
    font-size: 80px;
    margin-top: 142px;
    font-family: 'Great Vibes';
}

header .logoNazov img{      /*obtekanie obrazka a jeho zarovnanie*/
        float: left;
        height: 250px;
        margin-top: 50px;
}


/*subnazov*/
header .subNazov{  /*zarovnanie subnav*/
    display: flex;
    justify-content: center;
}

header .subNazov h2{
    font-size: 50px;
}


/*nav*/
header nav{       /*zakladne satavenie nav a zarovnanie textu v nom*/
    display: flex;
    text-align: center;
    background-color: #333;
}

header nav a {     /*nastavenie a v nav*/
    text-decoration: none;
    color: white;
    padding: 15px;
    font-size: 28px;
}

header nav a:hover { /*nastavenie farby pocas hover*/
    background-color: #fffb02;
    color: #000000;

}

header nav ul {        
    list-style: none;
    display: flex;
    margin: 5px;
    padding: 0px;
}

header nav ul li {
    position: relative;
    margin: 10px;
}

header nav .subnav {  /*styl subnavu, jeho skritie a nastavenie polohy*/
    display: none;
    position: absolute;
    top: 100%;
    background-color: rgb(255, 123, 0);
    z-index: 10;
    margin-top: 10px;
}

header nav ul li:hover .subnav { /*zobrazenie subnav pocas hover*/
    display: flex;
}


header nav .subnav li a {  /*farba a odstranenie dekoracie pisma*/
    color: #000;
    text-decoration: none;
}

header nav .active{ /*nastavenie farby pocas activnej stranky*/
    background-color: #ffc400;
    color: rgb(255, 0, 0);
}

header nav .activeSub { /*nastavenie farby pocas activnej nadradenej stranky*/
    background-color: #ff8800;
    color: rgb(255, 0, 0);
}





/*main*/ /*zakladne styli nastavene pre main*/

main .obsah{
    padding-left: 35px;
    padding-right: 35px;
    font-size: 20px;
    text-align: center;
}

main .obsah h3{
    font-size: 40px;
}

main .obsah h4{
    font-size: 30px;
}

main .obsah h5{
    font-size: 25px;
}



/*pre kontakt.html kontaktné údaje*/
main .obsah p .kontaktUvod {
    font-weight: bold;
}



/*pre recepty.html*/  /*zarovnanie astylovanie obrazku a popisu obrazka*/
main .obsah figure{
    display: block;
}

main #striedanie{
    background-color: #424242;
    color: white;
}

main .obsah figure img, main .obsah figure figcaption{
    display: inline-block;
}

main .obsah figure figcaption{
    margin-left: 10px;
    text-align: left;
    vertical-align: top;
}

main .obsah figure figcaption h4{
    font-size: 35px;
}

main .obsah figure figcaption dl dt strong{
    font-size: 35px;
}

main .obsah figure figcaption dl dd{
    margin-left: 30px;
    margin-bottom: 15px;
    font-size: 30px;
}

/*po img-map cursor zmena*/
main .obsah figure {
    cursor: crosshair;   /*zmena kurzora*/
}




/*pre kontakt a zdroje*/ /*zakladne styli pre .obsahZdroje*/
main .obsahZdroje {
    padding-left: 35px;
    padding-right: 35px;
    font-size: 20px;
}

main .obsahZdroje h3 {
    font-size: 40px;
}

main .obsahZdroje h4 {
    font-size: 30px;
}


main .obsahZdrojeA{  /*pre okkazy medzi strankami a na dokumentaciu*/
    margin-top: 10px;
    display: inline-flex;
}

main .obsahZdrojeA a{
    border: #000 solid;
    border-radius: 10px;
    width: 300px;
    background-color: #fffb00;
    text-decoration: none;
}

main .obsahZdrojeA a h3{
    text-align: center;
}

main .obsahZdrojeA a:hover{
    background-color: #fffea9;
}




/*odkazovac medzi jednotlivimi podstankami*/ /* zarovnanie a stilovanie odkazovacich okien (textu a img) na podstrankach receptov*/
main .obsah .odkazovac {
    display: flex;
}

main .obsah .odkazovac li {
    display: flex;
    padding: 50px;
}

main .obsah .odkazovac li a {
    padding: 20px;
    background-color: #fffb02;
    text-decoration: none;

    border: #000 solid 1px;
    border-radius: 10px;
}

main .obsah .odkazovac li a:hover {
    background-color: #fffea9;

    transform: scale(1.2);               /*animacia zvetcenia odkazovacieho okna*/
    transition: transform 0.5s ease;
}

main .obsah .odkazovac li a img {
    width: 250px;
}

main .obsah .odkazovac li a h4{
    font-size: 20px;
}




/* pre odkazy na recepty*/  /*to co predtím ale teraz uz na samostatne recpty, a ani stylovanie*/
main .obsah .receptyOdkazy {
    display: flex;
}

main .obsah .receptyOdkazy a {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;

    border: #fffea9 2px;
    border-radius: 15px;
    margin-bottom: 5px;

    background-color: #fffb00;
    color: rgb(0, 0, 0);
    font-size: 25px;
    text-decoration: none;
    margin-left: 5px;
}

main .obsah .receptyOdkazy a:hover {       /*zmena farby a animacia zvätcenia*/
    background-color: #feffb5;
    color: #000000;

    transform: scale(1.2);
        transition: transform 0.5s ease;
}




/*iba pre jednotlivé recepty*/

/*nazov receptu v header, uz nepouzivane*/
/*
header .receptySubNazov {
    display: flex;
    justify-content: center;
}

header .receptySubNazov h2 {
    font-size: 45px;
    color: #ff8800;
}
*/

/*obsah receptov*/ /*styly pre uz sastatne recety ich textu*/

main .receptyObsah {
    margin-left: 35px;
    margin-right: 35px;
    font-size: 22px;
}

main .receptyObsah h3 {
    font-size: 40px;
    color: #fffb00;
}

main .receptyObsah h4 {
    font-size: 30px;
    color: red;
    margin-left: 5px;
}

main .receptyObsah p,
li {
    margin-left: 18px;
}

main .receptyObsah strong {
    color: #000000;
}


/*pre tabble audio a video*/   /*stylovanie tabble na podstrankach*/
main  .receptyObsah article table{
    text-align: center;
    width: 80%;
    margin-top: 10px;
}

main .receptyObsah article table td img{
    width: 180px;
    border-radius: 10px;      /*zarovnanie okrajov na img*/
}

main .receptyObsah article table td img:hover { /*zvetcenie img pocas hover*/
    transform: scale(1.2);
    transition: transform 0.5s ease;
}

main .receptyObsah article table, td, th{
    border: solid 3.5px;
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    border-collapse: collapse;           /*colaps borderov, spojenie*/
    border-color: rgb(255, 153, 0);
}


main .receptyObsah article table th, td{
    font-size: 25px;
}

main .receptyObsah article table th{
    border-color: rgb(255, 153, 0);
    background-color: rgb(170, 255, 255);
    font-size: 30px;
}

main .receptyObsah article table td{
    background-color: #e6e6e6;
}


/*footer*/ /*stylovanie footeru*/
footer{   
    background-color: black;
    padding-bottom: 1px;
    margin: 10px;
    margin-top: 20px;
    border: #000 1px;
    border-radius: 10px;
}

footer p{
    color: white;
    font-size: 25px;
    text-align: center;
}

footer a{  /*buton na zaciatok stylovanie a zafixovaný v pravo dolnom rohu*/
    padding: 10px;
    border: #fffea9 2px;
    border-radius: 20px;
    background-color: #ff8800;
    color: aliceblue;
    font-size: 25px;
    text-decoration: none;

    margin-bottom: 10px;
    margin-right: 10px;

    position: fixed;
    bottom: 0;
    right: 0;
}

footer a:hover{ /*nastavenie farby pocas hover*/
    background-color: #ffbd72; 
    color: #000000;
}