/*
A margó miatt keletkező nem kívánt sortörés elkerülése érdekében a következő technikát használtam:
-a flex child elementek responsive méret meghatározását a "flex: ;" attribútum segítségével végeztem el
-a "flex: ;" attribútum 3 paraméterrel rendelkezik (forrás: https://developer.mozilla.org/en-US/docs/Web/CSS/flex):
        1. flex-grow: az element növekedésének mértékét határozza meg a fennmaradó szabadhely mentén
        2. flex-shrink: ha a parent konténer kisebb, akkor a meghatározott arány szerint csökken a child element szélessége
        3. flex-basis: a kiinduló szélességet általa lehet meghatározni
-a flex child elementek margó melletti méretét a calc() css matematikai függvény segítségével számoltam ki úgy,
hogy a százalékban megadott szélességéből kivontam a margó szélességének a kétszeresét (hiszen a margó jobbról
és balról is határolja)
-a könnyebb kezelhetőség és az életszerűség kedvéért a margó szélességét egy css változóban tároltam el, amelyet
a :root{} elementen belül egylépésben deklarálunk és inicializálunk. Szintaktikája: --változó_név: érték;.
Meghívásához a var() függvény kell. A függvény bemenő értéke a "--változónév".
-mivel különböző képernyő méretek mentén a child elementek szélessége megváltozik, a sortéres irányíthatósága végett
media queries-ekben határoztam meg a különböző képernyő szélességek mellett elvárt méreteket.

Orbán Gábor (gazdaságinformatikus hallgató) munkája alapján
*/

:root{
    --margin-size: 1%;
}
/*====ALTALANOS====*/

* {
    box-sizing: border-box;
}

html {
    padding: 0px;
    margin: 0px;
}

body {
    background-color: rgb(135, 206, 250);
    padding: 0px;
    margin: 0px;
}

.container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}

.container > *{
    box-sizing: border-box; /*a böngésző a szélességbe beleszámítja így a belső margók és a keret stélességét*/
    margin: var(--margin-size);
    height: fit-content; /*ez által a magasság méretét a tartalom magassága fogja meghatározni*/
}

/*====TAGEK====*/

header {
    padding: 2px;
    margin: 0px;
    background-color: rgb(50, 140, 193);
    text-align: center;
    font-size: 1.5em;
    color: rgb(255, 255, 255);
}

article {
    background-color: rgb(27, 123, 52);
    padding: 0px 8px;
    color: #ffffff;
    text-align: justify;
    border-radius: 15px;
}


aside {
    background-color: rgb(205, 83, 96);
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 0.84em;
    border-radius: 15px;
}
aside h2.cikkcim{
    display: block;
    text-align: center;
}

aside.tapertek {
    font-size: 1.15em;
    font-weight: bold;
    flex: 1 1 100%;
}

footer {
    background-color: rgb(179, 125, 78);
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 12px;
    padding: 15px;
}

/*====MENU====*/

nav {
    padding: 8px;
    /* flex: 1 1 100%; */
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav li a {
    display: block;
    padding: 8px;
    margin-bottom: 12px;
    color: rgb(255, 255, 255);
    background-color: rgb(143, 195, 58);
    border-radius: 15px;
    text-align: center;
    text-decoration: none;
}

nav ul li a.active {
    background-color: rgb(179, 125, 78);
}

nav li a:hover {
    background-color: rgb(146, 102, 63);
}

/*====OSZTALYOK====*/

img.gyumolcskep {
    height: auto;
    float: right;
    margin-top: 8px;
    margin-left: 15px;
    margin-bottom: 5px;
}

h2.cikkcim {
    display: table;
    text-align: left;
}

p.tartalom {
    padding: 3px;
    text-indent: 1.1em;
}

.bananszin {
    background-color: rgba(220, 178, 57, 0.85);
}

.szilvaszin {
    background-color: rgba(107, 122, 143, 0.85);
}

.eperszin {
    background-color: rgba(184, 38, 1, 0.85);
}

@media screen and (max-width: 600px) {
    nav {
        flex: 1 1 calc(100% - 2 * var(--margin-size));
    }
    article {
        flex: 1 1 calc(100% - 2 * var(--margin-size));
    }
    aside {
        flex: 1 1 calc(100% - 2 * var(--margin-size));
    }
    aside.tapertek {
        flex: 1 1 calc(100% - 2 * var(--margin-size));
    }
    article.gyumolcs {
        flex: 1 1 calc(100% - 2 * var(--margin-size));
    }
}

@media screen and (min-width: 600px) and (max-width: 768px) {
    /*tablet*/
    nav {
        flex: 1 1 calc(25% - 2 * var(--margin-size));
    }
    article {
        flex: 1 1 calc(75% - 2 * var(--margin-size));
    }
    aside {
        flex: 1 1 calc(100% - 2 * var(--margin-size));
    }
    aside.tapertek {
        flex: 1 1 calc(100% - 2 * var(--margin-size));
    }
    article.gyumolcs {
        flex: 1 1 calc(100% - 2 * var(--margin-size));
    }
}

@media screen and (min-width: 768px) {
    /*számítógép*/
    nav {
        flex: 1 1 calc(25% - 2 * var(--margin-size));
    }
    article {
        flex: 1 1 calc(50% - 2 * var(--margin-size));
    }
    aside {
        flex: 1 1 calc(25% - 2 * var(--margin-size));
    }
    aside.tapertek {
        flex: 1 1 calc(25% - 2 * var(--margin-size));
    }
    article.gyumolcs {
        flex: 1 1 calc(75% - 2 * var(--margin-size));
    }
}