/*====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;
    justify-content: space-around;
}

.container>* {
			height: fit-content;
    margin: 1%;
    /* ne ide írjuk a   flex: 1 1 100%; részt, mert felülír máshol ahol nem kellene, erősebb, mint a media query */
}

/*====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 {
    flex: 1 1 100%;
    background-color: rgb(27, 123, 52);
    padding: 0px 8px;
    color: #ffffff;
    text-align: justify;
    border-radius: 15px;
}


aside {
    flex: 1 1 100%;
    background-color: rgb(205, 83, 96);
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 0.84em;
    border-radius: 15px;
}

aside.tapertek {
    font-size: 1.15em;
    font-weight: bold;
}

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 all and (min-width: 600px) {
    /*tablet*/
    nav {
        flex-basis: 23%;
    }
    article {
        flex-basis: 73%;
    }
    aside {
        flex-basis: 100%;
    }
    aside.tapertek {
        flex-basis: 100%;
    }
    article.gyumolcs, article.szilva2 {
        flex-basis: 100%;
    }
}

@media all and (min-width: 768px) {
    /*számítógép*/
    nav {
        flex-basis: 23%;
    }
    article {
        flex-basis: 48%;
    }
    article, article.szilva2 {
        flex-basis: 48%;
    }
    article.szilva {
        flex-basis: 73%;
    }
    aside {
        flex-basis: 23%;
    }
    aside.tapertek {
        flex-basis: 23%;
    }
    article.gyumolcs {
        flex-basis: 73%;
    }
}