/*HTML ELEMENTY*/

/*  
Vlastnosti <body> el. odsadenie od okrajov stranky, farba pozadia, typ pisma pre celu stranku
    margin: vonkajsie odsadenie
    font-family: nastavenie typu písma
    background-color: farba pozadia
*/
body {
    margin: 20px 20px;
    width: 100%;
    font-family: "Arial", "Helvetica", sans-serif;
    background-color: #E8D1C5;

}

/*
Vlastnosti <header> elementu - usporiadanie vnorených el., farba pozadia, sirka, odsadenie, zjemnenie rohov
width: sirka hlavicky pre titulku
padding: vnutorne odsadenie
border-radius: zaokruhlenie rohov
display:flex - zobrazenie vsetkych vnorenych elementov na 1 riadku
align-items:center - vertikalne zarovnanie vnorenych elementov na stred
justify-content: center - horizontalne zarovnanie vnorenych elementov na stred
*/
header {
    background-color: #452829;
    width: 70%;
    margin: 50px auto;
    padding: 50px 50px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
Vlastnosti <main> elementu - farba pozadia, odsadenie, šírka, okraje
border: štýl, hrúbka a farba rámu
*/
main {
    background-color: #F3E8DF;
    padding: 20px 50px;
    margin: 0 auto;
    width: 70%;
    border-radius: 30px;
    border: 1px solid #452829;

}

/*
Vlastnosti <article> el. vnoreného do main - pozadie, okraje, rohy, odsadenie..
*/
main article {
    background-color: #F3E8DF;
    border: 1px solid #452829;
    border-radius: 30px;
    margin: 30px 0;
    padding: 30px 30px;

}

/*
vlastnosti <p> el. vnoreného do <main> el. - veľkosť, typ písma, odsadenie, zarovnanie textu
font-size: nastavenie velkosti písma
font-style: natavenie štýlu písma
text-align: left - zarovnanie textu naľavo
*/
main p {
    font-size: 1.3em;
    font-style: italic;
    margin: 50px auto;
    text-align: left;
}

/*
vlastnosti neusporiadaného zoznamu <ul> vnoreneho do <main> - napr. suroviny k receptu

list-style-type: square - štýl symbolov pre neusporiadany zoznam
margin-top/margin-bottom: vonkajsie odsadenie hore/dole
*/
main ul {
    font-size: 1.3em;
    list-style-type: circle;
    margin-top: 50px;
    margin-bottom: 50px;
    color: black;
}

/*
vlastnosti usporiadaného zoznamu <ol> vnoreneho do <main> - postup receptu
list-style: decimal - štýl usporiadaného zoznamu (arabské číslice)
*/
main ol {

    font-size: 1.3em;
    list-style: decimal;
    width: 80%;
    margin-top: 50px;
    margin-bottom: 50px;
}

/*
 <li> odsadenie medzi riadkami
*/
li {
    margin-top: 10px;
    margin-bottom: 10px;
}

/*
Vnoreny HTML element <li> do hlavneho menu
Nastavenie veľkosti a štýlu písma pre text v Hlavnom menu

*/
#hlavne-menu li {
    font-size: 1.3em;
    font-weight: 800;
    color: #452829;
}

/*
vnoreny HTML element <li> do <ul> hlavneho menu
zmena farby písma v hlavnom menu pri prechadzani myšou
*/
#hlavne-menu li:hover {
    color: purple;
}

/*
vnoreny HTML element <li> do <ul> vedlajsie menu
transition: transoform 0.3s ease - plynuly prechod elementu na stav definovany v pseudotriede :hover 
počas 0.3s ease - premena začne pomaly, potom zrychli, nakoniec spomali
*/
#vedlajsie-menu li {
    font-size: 1em;
    font-weight: 800;
    border: 1px solid #452829;
    padding: 5px 10px;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

/*
pseudotrieda <li> vedlajsie menu
transform: scale(1.1) - zväčšenie elementu o 10% pri prechadzani myšou
*/
#vedlajsie-menu li:hover {

    background-color: #E8D1C5;
    transform: scale(1.1);
}

/*
Kotva - odkazy na navigáciu na stránke aj externé zdroje
text-decoration: none - nezobrazuje sa čiara pod odkazmi
*/
a {
    color: blueviolet;
    text-decoration: none;
}

/*
Kotva - prechod myšou
a:hover - zmena farby odkazu pri prechode mysou
*/
a:hover {
    color: purple;
}

/*
Titulka h1 - na každej stránke
color: farba písma
font-weight: zvýraznenie/hrúbka písma
*/
h1 {
    color: whitesmoke;
    font-size: 2.5em;
    font-weight: 900;
    margin: 0 50px;
    width: 75%;
    text-align: center;
}


/*Podnadpis h2 - na stranke o vareni uvadza jednotlive sekcie*/
h2 {
    font-size: 2em;
    font-weight: 900;
    text-align: left;
    margin: 100px auto 50px auto;
    color: #452829;

}

/*Podnadpis h3 - Názov receptu*/
h3 {

    font-size: 2em;
    font-weight: 900;
    text-align: center;
    color: #452829;

}

/*Podnadpis h4 - suroviny + postup receptu */
h4 {

    font-size: 1.3em;
    font-weight: 900;
    text-align: left;
    color: #452829;
}

/*
aside - poznámka na okraji
float:right - obtekanie elementu 'aside' zľava. Element je ukotveny napravo a je vyňatý z HTML flow
border-left - rám na ľavej strane elementu aside
*/
aside {
    float: right;
    width: 250px;
    font-size: small;
    padding: 10px 50px 10px 30px;
    color: grey;
    font-family: 'Times New Roman', Times, serif;
    border-left: 2px solid;

}

/*
upraveny <mark> element
namiesto žltého pozadia, zvyrazni hrubku pisma + vlnité podčiarknutie textu
*/
mark {

    background-color: transparent;
    color: black;
    text-decoration: wavy underline;
    font-weight: bold;
}

/*
vnutorne odsadenie table data v tabulke Kontakty
*/
table td {
    padding: 20px 30px;
    border: none;
}

/* Youtube video rozmer*/
iframe {
    width: 560px;
    height: 315px;
}

/*rozmery okna video*/
video {
    width: 560px;
    height: 315px;
}

/*footer uzatvára každú stránku + odkaz na kontakty*/
footer {
    text-align: center;
    color: gray;
    padding: 50px 0;
    font-size: 1em;
    width: 100%;
}


/*TRIEDY*/

/*
Trieda sa používa na obrázky k receptom
display:block - zobrazenie elementu s triedou .img-recept ako jediny element na 1 riadku
width:500px height: auto - automatické nastavenie výšky obrázku v pomere ku šírke
*/
.img-recept {
    display: block;
    width: 600px;
    height: auto;
    margin: 50px auto 50px 30px;
    border-radius: 20px;
    transition: transform 0.3s ease;
}

/*
Vlastnosti obrázku pri kliknuti
.img-recept:active - active state znamena kliknutie na element.
 transform: scale(2) - Obrazok sa po kliknuti zväčši na 2-násobok základnej veľkosti
*/
.img-recept:active {
    transform: scale(2);
}

/*
LOGO
border-color: #452829;  farba rámu
border-style: solid; zobrazí čiaru
border-width: 1px; nastavenie hrubky ramu
*/
.logo {
    width: 75px;
    height: auto;
    margin: 5px;
    border-color: #452829;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    background-color: #F3E8DF;
    transition: transform 0.8s ease;
}

/*
Logo - vlastnosti pri prechode myšou
.logo:hover - pri prechadzani myšou sa logo otočí o 360 stupňov
*/
.logo:hover {
    transform: rotate(360deg);
}

.kontakty {
    width: 75px;
    height: 75px;
    transition: transform 0.5s ease;
}

.kontakty:hover {
    width: 75px;
    height: auto;
    transform: scale(1.5);
}

/*
Nastavenie vlastnosti obrazkov (ikony) v hlavnom menu
box-shadow 0.3s ease - premena stav bez tieňa na stav s tieňom za 0.3s
*/
.img-hlavne-menu {
    background-color: #E8D1C5;
    width: 150px;
    height: auto;
    border-radius: 30px;
    border: 1px solid #452829;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

}

/*
zmena hrubky ramu položiek hl. menu pri prechadzani myšou
transform: scale(1.1) zväčšenie elementu o 10 percent
box-shadow: 5px -5px 30px black; vytvori iluziu tieňa za elementom 
1.hodnota posun po ose x, 2. posun po ose y, 3. rozostrenie, 4. farba tieňa
*/
.img-hlavne-menu:hover {
    transform: scale(1.1);
    box-shadow: 5px -5px 30px black;
    border: 3px solid #452829;
}

/*trieda na zarovnanie <iframe> el vnoreneho do <span>*/
.kontajner-video {
    display: flex;
    justify-content: left;

}



/*ID selektory*/

/*
ID .hlavne-menu sa používa na <ul> hlavného menu
list-style-type: none; vypnutie symbolov pri neusporiadanom zozname
gap: nastavenie medzery medzi elementami <li> v rámci <ul>
*/
#hlavne-menu {
    list-style-type: none;
    display: flex;
    justify-content: center;
    gap: 20px;
    font-weight: bold;
    font-size: 1.3em;
    text-align: center;

}


/*
ID #vedlajsie-menu na <ul> vedlajsie menu
sluzi na horizontalne zarovnanie a usporiadanie vedľajšieho menu.
*/
#vedlajsie-menu {
    width: 100%;
    display: flex;
    justify-content: center;
    list-style-type: none;
    font-size: 1.3em;
    gap: 30px;
}

/*
zarovnanie obrazkovej mapy. ID sa pouziva v <nav> el. Element <map> je vnoreny do <nav>
*/
#obrazkova-mapa {
    display: flex;
    justify-content: center;
    width: 100%;
}