* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: koho, 'Courier New', Courier, monospace;
}

/* Többször használatos értékek. A var() függvénnyel hívhatóak majd meg a későbbiekben */
:root {
    /* Színek, amik többször fel lesznek használva. */
    --main-green: rgb(55, 104, 28);
    --hatter: rgb(221, 223, 219);
    --main-red: #ec401e;

    /* reszponzív font-méretek: az első érték megadja, hogy 300px széles viewport esetén mekkora legyen a font mérete (a harmadikra is be kell állítani). A második érték pedig hogy 1600px-es viewport esetén mekkora legyen a font mérete. A kettő között pedig arányosan változik. */
    --nagyon-kicsi: calc(10px + (20 - 10) * ((100vw - 300px) / (1600 - 300)));
    --kicsi: calc(12px + (25 - 12) * ((100vw - 300px) / (1600 - 300)));
    --kozepes: calc(14px + (37 - 14) * ((100vw - 300px) / (1600 - 300)));
    --nagy: calc(20px + (60 - 20) * ((100vw - 300px) / (1600 - 300)));
    --nagyon-nagy: calc(70px + (200 - 70) * ((100vw - 300px) / (1600 - 300)));
}

body {
    background-color: var(--hatter);
}

@font-face {
    font-family: koho;
    src: url(fonts/KoHo-Light.ttf);
}

/* FLEX-container */

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

/* HEADER - NAV */

header {
    background-color: rgba(184, 188, 181, 0.859);
    font-size: var(--nagy);
    display: flex;
    position: absolute;
    top: 0;
    height: 12vmin;
    width: 100vw;

    /* A többi element felett legyen. */
    z-index: 7;

    /* elmodósott háttér */
    backdrop-filter: blur(1vmax);
    transition: 0.3s;
}

header nav {
    flex: 1 1 95%;
    align-self: center;
}

header nav ul {
    align-self: center;
    align-items: center;
    justify-content: space-around;
}

header nav li {
    list-style: none;
}

header nav a {
    text-decoration: none;
    color: black;

    overflow: visible;

    /* Ami nem látszódik: egy piros, balra eltolt, vékony 'csík'. A háttér tulajdonságaival megadva. */
    background-image: linear-gradient(var(--main-red) 0 0, var(--main-red) 0 0);
    background-size: 200% 0.1em;
    background-position: 200% 100%;
    background-repeat: no-repeat;

    /* Először csússzon be a csík (background-position), és kicsit később nőjön meg a piros háttér (ezért kapott a background-size delay-t) */
    transition-property: background-position, background-size;
    transition-duration: 0.5s, 0.2s;
    transition-delay: 0s, 0.2s;
}

header nav a:hover {
    background-size: 200% 90%;
    background-position: 0 100%;
}

#activePage {
    background-size: 200% 90%;
    background-position: 0 100%;
}

#sitesButton {
    flex: 0 1 5%;

    /* Legyen négyzet a button. */
    aspect-ratio: 1/1;

    display: none;
    margin: 3vmin;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
}

#sitesButton .csik {
    position: absolute;
    top: 48%;
    left: 5%;
    width: 90%;
    height: 4%;
}

#sitesButton .csik:nth-child(1) {
    /* Elforgatja 45°-kal az egyik csíkot. A másik további 90 fokkal el lesz fordítva, így x jelet formálva. */
    transform: rotate(45deg);
}

#sitesButton .csik:nth-child(2) {
    transform: rotate(135deg);
}

#sitesButton:hover {
    transform: rotate(180deg);
}

#sitesButton:active {
    transform: rotate(180deg) scale(0.8);
}


/* START - CÍMLAP */

.start {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Megakadályozza, hogy az ezen az element-et túlcsoduló tartalmak látszódjanak. A háttér csordulna túl, de így nem látszódik. */
    overflow: hidden;

    /* Ha beállítunk egy perspektívát, akkor a transform: rotateY és rotateX tulajdonságra a child element-ek 3d-szerűen dőlnek. A háttér állításához kell.  */
    perspective: 30vh;

    /* Ez a háttérre vonatkozik. A háttér így a start elementhez relatíve fogja pozícionálni magát. */
    position: relative;
}

.index {
    height: 100vh;
}

.menu {
    height: 80vh;
}

.gyik {
    height: 70vh;
}

.about {
    height: 80vh;
}

.menu .title-background {
    background-image: url(images/diego-marin-PeDMdPVVUik-unsplash.jpg);
}

.index .title-background {
    background-image: url(images/cathal-mac-an-bheatha-CJAKsppS2co-unsplash.jpg);
}

.gyik .title-background {
    background-image: url(images/vadim-bogulov-D2LbL802UW0-unsplash.jpg);
}

.about .title-background {
    background-image: url(images/nafinia-putra-Kwdp-0pok-I-unsplash.jpg);
}

.title-background {
    /* A leghátsó element-nek kell lennie. */
    z-index: -1;
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    background-size: cover;
    background-position: center;
}

#title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4vmax;
}

h1 {
    font-size: var(--nagyon-nagy);
    color: var(--main-green);
}

#title #alsoSzoveg {
    font-size: 6vmin;
    font-weight: bold;
    background-color: var(--hatter);
    border-radius: 2vmin;
    padding: 1vmin 2vmin;
    height: 8vmin;
    min-width: 6vmin;
}

#jobbBorder {
    height: 100%;
    border-right: 0.6vmin solid var(--hatter);
    transition: 0.2s;
}

#szoveg{
    line-height: 100%;
}

/* ASIDE - NAV */

aside {
    z-index: 2;
    flex: 1 1 100%;

    /* Maradjon a képernyő tetején az aside, ne kússzon ki a képernyőből. */
    position: sticky;
    top: 0;
    align-self: flex-start;
    background-color: var(--hatter);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 2%;
    gap: min(3.8vw, 3vh);
}

#asideButton {
    flex: 0 1 6%;

    /* Legyen négyzet alakú az aside button. */
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    cursor: pointer;
    transition: 0.2s;
}

#asideButton:hover {
    /* a méret csökkenjen le a 0.9-edjére */
    transform: scale(0.9);
}

/* Minden második, tehát az első és a harmadik csík-ra vonatkozzon, amikor az aside-button fölé kerül az egér */
#asideButton:hover .csik:nth-child(2n-1) {
    width: 40%;
}

.csik {
    height: 10%;
    width: 80%;
    background-color: black;
    border-radius: 4vmin;
    transition: 0.2s;
}

aside nav {
    flex: 1 1 90%;
}

aside ul {
    height: 100%;
    list-style: none;
    justify-content: space-evenly;
    align-items: center;
    gap: 3vmin;
}

aside a {
    line-height: 2.5vmax;
    text-decoration: none;
    color: black;
    font-size: min(4vmin, 2.2vmax);
    font-weight: bold;
    transition: 0.2s;
}

aside a:hover {
    color: var(--main-red) !important;
}

/* MAIN - ARTICLES */

main {
    flex: 1 1 100%;
    padding: 2%;
    gap: min(7vmax, 10vmin);
    max-width: 100vw;
    overflow: hidden;
}

/* INDEX - AJÁNLATOK - MOZGÓ KÉPGALÉRIA */

#ajánlatok {
    flex: 1 1 100%;
    height: min(40vmax, 80vmin);
}

/* ajánlatváltó gombok */

#balra,
#jobbra {
    flex: 1 1 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#balra img,
#jobbra img {
    cursor: pointer;
    width: 50%;
    transition: 0.2s;
}

#balra img:hover,
#jobbra img:hover {
    transform: scale(1.2);
}

#balra img:active {
    /* A perspektív segítségével a rotateY hatására 'bedől' a kép. */
    transform: perspective(2px) rotateY(-0.5deg);
}

#jobbra img:active {
    transform: perspective(2px) rotateY(0.5deg);
}

/* javascript képgaléria */

#ajanlatokAblak {
    flex: 1 1 80%;

    /* Ehhez az ablakhoz relatív pozícionálja magát az ajánlatokSlides */
    position: relative;

    /* Ne látszódjon az ezen az ablakon túlcsorduló része az ajánlatokSlides-nak. */
    overflow: hidden;
}

#ajanlatokSlides {
    width: 300%;
    height: 100%;
    position: absolute;
    left: 0px;
    display: flex;

    /* A transform és a left tulajdonságok transition-jének külön kezelése. */
    transition-property: transform, left;
    transition-duration: 0.4s, 0.4s;
    transition-delay: 0s, 0.4s;
}

.ajanlat {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
}

.ajanlat .szoveg {
    flex: 1 1 20%;
    text-align: center;
}

.ajanlat .kep {
    flex: 1 1 80%;
    overflow: hidden;
}

.ajanlat .kep img {
    width: 100%;
    height: 100%;
    /* A kép így kitölti a méretet, anélkül hogy torzulni (ami nem fér bele, az 'levágódik') */
    object-fit: cover;
}

.ajanlat .szoveg h3 {
    font-size: var(--nagy);
}

.ajanlat .szoveg h4 {
    font-size: var(--kozepes);
}

/* PIROS-SZÜRKE section-ök - INDEX és ABOUT lapon */

.pirosSzurke {
    flex: 1 1 100%;
    gap: min(2vmax, 4vmin);
}

.pirosSzurke section {
    flex: 1 1 100%;
    align-items: center;
    gap: 6%;

    /* ease-out esetén az elején gyors, majd lassú lesz a transition. */
    transition: ease-out 0.8s;
}

.pirosSzurke .szoveg {
    flex: 1 1 57%;
    padding: 2vmin;
    background-color: var(--main-red);
}

.pirosSzurke .szoveg h3 {
    font-size: var(--kozepes);
}

.pirosSzurke .szoveg p {
    font-size: var(--kicsi);
}

.pirosSzurke .kep {
    flex: 1 1 37%;
}

.pirosSzurke .kep img {
    width: 100%;
    height: 40vmin;

    /* A képek töltsék ki a rendelkezésre álló teret, torzulás nélkül. */
    object-fit: cover;
    /* Legyenek középre igazítva a képek. */
    object-position: center;
}

/* INDEX - INFORMÁCIÓK rész */

#információk {
    flex: 1 1 100%;
    gap: 4vmin;
}

#információk section {
    flex: 1 1 100%;
    align-items: center;
    gap: 2%;

    /* ease-out - az elején gyors, utána lassuló lesz a transition */
    transition: ease-out 0.6s;
}

#információk section div:nth-child(1) {
    flex: 1 1 40%;
    overflow: hidden;
}

#információk section div:nth-child(2) {
    flex: 1 1 58%;
    overflow: hidden;
}

#információk h3 {
    text-align: center;
    font-size: var(--kozepes);
    font-weight: bold;
}

#információk h4 {
    font-size: var(--kozepes);
    font-weight: bold;
}

#információk p {
    font-size: var(--kicsi);
}

#budapest {
    flex: 1 1 70%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

#információk img {
    width: 100%;
}

/* nyitvatartás tábla */

table {
    border: 0.4vmin solid black;
    font-size: var(--kicsi);
    width: 100%;
    border-collapse: collapse;
}

table td {
    border: 0.2vmin solid black;
    text-align: center;
    padding: 1vmax;
}

/* térkép */

#map {
    width: 100%;
    height: 100%;
    min-height: 20vmax;
    border: 2px solid black;
}


/* MENU kártyák és a GYIK kártyái*/

.menuPage article,
.gyikPage article {
    flex: 1 1 100%;
    gap: 2%;
    height: fit-content;
    margin: 0;
}

.menuPage section,
.gyikPage section {
    flex: 0 1 49%;

    /* A min függvény mindig a kisebb értéket adja vissza. */
    height: min(70vmin, 35vmax);
    display: flex;
    flex-direction: column;
    padding: 2%;
    margin: 2% 0;
    border-radius: 2vmin;
    background-color: rgb(206, 206, 206);
    overflow: hidden;

    /* ease-out - az elején gyors, utána lassuló lesz a transition */
    transition: ease-out 0.8s;
}

.gyikPage section {
    flex: 1 1 100%;
    height: min-content;
    min-height: 10vh;
    padding: 1%;
    margin: 1% 0;
    font-size: var(--kicsi) !important;

    /* ease-out - az elején gyors, utána lassuló lesz a transition */
    transition: ease-out 0.4s;
}

.menuPage #ajánlatokMenu section {
    background-color: var(--main-red);
}

.menuPage .indexImage,
.gyikPage article section div:nth-child(1) {
    flex: 1 1 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    /* A translateY függőlegesen eltolja az element-et. A calc() függvénnyel pedig számolni lehet. */
    transform: translateY(calc(min(70vmin, 35vmax)/4));
    transition: 0.5s;
    overflow: hidden;
}

.gyikPage article section div:nth-child(1) {
    transform: translateY(0);
    font-weight: bold;
    text-align: center;
}

.menuPage img {
    max-height: 100%;
    max-width: 100%;
    /* A kép férje bele teljsen az element-be, ne torzuljon, vagy vágódjon le semmi. */
    object-fit: contain;
}

.menuPage .description,
.gyikPage article section div:nth-child(2) {
    flex: 1 1 50%;
    margin-top: 5%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    /* A translateY függőlegesen eltolja az element-et. A calc() függvénnyel pedig számolni lehet. */
    transform: translateY(calc(min(70vmin, 45vmax)/4));
    transition: 0.7s;
    transition-delay: 0.05s;
}

#ajánlatokMenu .description{
    justify-content: flex-start;
    padding-bottom: 20%;
}

.gyikPage article section div:nth-child(2) {
    margin-top: 1%;
    transform: translateY(150%);
}

.etelAdatok {
    opacity: 0;
    transition: 1s;
    transition-delay: 0.4s;
}

.menuPage h3 {
    text-align: center;
    font-size: var(--kozepes);
}

.menuPage h4 {
    text-align: left;
    font-weight: lighter;
    font-size: var(--kicsi);

    opacity: 0;
    transition: 1s;
    transition-delay: 0.4s;
}

.menuPage .ár {
    font-size: var(--kicsi);
    font-weight: bold;
    background-color: rgb(188, 165, 165);
    padding: 0 2%;
    border-radius: 1vmin;
    align-self: flex-start;
    margin-bottom: 5%;

    opacity: 0;
    transition: 1s;
    transition-delay: 0.5s;
}

.menuPage .kosarForm {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

    /* Függőlegesen eltolja az elementet. */
    transform: translateY(10vmax);
    transition: 0.5s;
    transition-delay: 0.6s;
}


.menuPage section:hover .indexImage,
.gyikPage article section:hover div:nth-child(1) {
    /* Így már nincs függőlegesen eltolva az element. */
    transform: translateY(0);
}

.menuPage section:hover .description,
.gyikPage article section:hover div:nth-child(2) {
    transform: translateY(0);
}

.menuPage section:hover h4 {
    opacity: 1;
}

.menuPage section:hover .ár {
    opacity: 1;
}

.menuPage section:hover .kosarForm {
    transform: translateY(0);
}

.kosarForm div:nth-child(1) {
    flex: 1 1 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kosarForm div:nth-child(2) {
    flex: 1 1 15%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.kosarForm div:nth-child(3) {
    flex: 1 1 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kosarForm div:nth-child(4) {
    flex: 1 1 45%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.plusz,
.minusz {
    background: none;
    border: none;
    font-size: var(--nagy);
    font-weight: bold;
    color: var(--main-red);
    cursor: pointer;
    transition: 0.2s;
}

.plusz:hover,
.minusz:hover{
    /* A gombok az 1.4-szeresükre nőnek. */
    transform: scale(1.4);
}

.plusz:active {
    /* A gombok az 1.4-szeresükre nőnek, és függőlegesen eltolódnka. */
    transform: translateY(-50%) scale(1.4);
}

.minusz:active {
    /* A gombok az 1.4-szeresükre nőnek, és függőlegesen eltolódnka. */
    transform: translateY(50%) scale(1.4);
}


.db {
    background-color: var(--hatter);
    border: none;
    border-radius: 1vmin;
    font-size: var(--kozepes);
    text-align: center;
    width: 100%;
    pointer-events: none;
}

.kosarba {
    background-color: var(--main-green);
    border: none;
    border-radius: 12vmin;
    font-size: var(--kicsi);
    font-weight: bold;
    padding: 1% 5%;
    cursor: pointer;
    transition: 0.2s;
}

.kosarba:hover {
    background-color: rgb(118, 155, 118);
}

.kosarba:active {
    background-color: rgb(170, 221, 170);
}


/* KOSÁR */

#kosar {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    height: fit-content;
}

#kosar>div {
    flex: 1 1 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 4%;
}

#kosarTartalma {
    flex: 1 1 48%;
    display: flex;
    flex-wrap: wrap;
    height: auto;
    overflow: hidden;
    gap: 2vmin;
}

#kosarTartalma section {
    flex: 1 1 100%;

    /* A min() függvény mindig a kisebb értéket adja vissza. */
    height: min(12vmin, 6vmax);

    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2%;
    margin: 0;
    gap: 4%;
}

#kosarTartalma .kosarImage {
    flex: 1 1 20%;
    height: 100%;
}

#kosarTartalma .kosarImage img {
    height: 100%;
}

#kosarTartalma .kosarAdatok {
    flex: 1 1 76%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 1vmax;
}

#kosarTartalma .kosarAdatok p {
    font-size: var(--kicsi);
}

#kosar div article:nth-child(2) {
    flex: 1 1 48%;
    display: flex;
    flex-wrap: wrap;
    gap: 2vmin;
}


#udito {
    flex: 1 1 100%;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0;

    /* A min() függvény mindig a kisebb értéket adja vissza. */
    height: min(12vmin, 6vmax);

}

#udito p {
    flex: 1 1 80%;
    align-self: center;
    font-size: var(--kicsi);
}

#udito div {
    flex: 1 1 20%;
    height: 70%;
}

#udito div img {
    width: 100%;
    height: 100%;

    /* Az üdítő-kép férjen bele az elementbe, ne torzuljon, és ne vágodjon le egyik része sem. */
    object-fit: contain;
}

#vegosszeg {
    flex: 1 1 100%;
    font-weight: bold;
    background-color: var(--main-red);
    height: fit-content;
    font-size: var(--kozepes);
    padding: 2%;
    margin: 0;
}

#rendelesForm {
    flex: 1 1 100%;
    height: fit-content;
    font-size: var(--kicsi);
    margin: 0;
    margin-top: 2%;
}

#rendelesForm form {
    display: flex;
    flex-wrap: wrap;
}

#rendelesForm form>* {
    margin: 2% 0;
    flex: 1 1 100%;
}

#rendelesForm form fieldset {
    border: 0.5vmin solid var(--main-red);
    border-radius: 2vmin;
}

#rendelesForm form fieldset legend {
    padding: 1% 2%;
    margin-left: 2%;
    font-size: var(--kozepes);
    font-weight: bold;
    background-color: var(--main-red);
}

#rendelesForm form fieldset div,
form p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 2% 2%;
    gap: 1%;
    height: min-content;
}

#kosar form div label {
    flex: 1 1 100%;
}

/* A validálás esetén a hibaüzenetek formázása */
label.error {
    flex: 1 1 48% !important;
    color: var(--main-red);
    font-size: var(--nagyon-kicsi) !important;
}

#kosar form div input,
#kerulet {
    flex: 0 1 50%;
    font-size: var(--kicsi);
    padding: 1%;
    height: fit-content;
    border: none;
    border-radius: 1vmin;
    overflow: hidden;
}

form #hely {
    display: flex;
    flex-direction: column;
}

form #kerulet {
    font-size: var(--kicsi);
}

form #keruletLabel,
#kuponLabel {
    flex: 0 1 48% !important;
}

form #megjegyzes {
    width: 60%;
    height: 5vmax;
    border-radius: 1vmin;
    border: none;
    padding: 1%;
    font-size: var(--kicsi);
    margin-top: 1vmax;
}

#leadasGomb {
    margin-top: 2vmax;
    background-color: var(--main-red);
    font-weight: bold;
    font-size: var(--kozepes) !important;
    height: auto !important;
    transition: 0.2s;
    cursor: pointer;
}

#leadasGomb:hover {
    background-color: #ec401ea8;
}

#leadasGomb:active {
    background-color: #a8270d;
}

#kuponGomb {
    background-color: var(--main-green);
    font-size: var(--kicsi);
    font-weight: bold;
    padding: 0.5% 1.5%;
    border-radius: 1vmin;
    border: none;
    transition: 0.2s;
    cursor: pointer;
}

#kuponGomb:hover {
    background-color: green;
}

#kuponGomb:active {
    /* Csökkenjen a gomb a 0.9-szeresére. */
    transform: scale(0.9);
}

form > div > *{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5%;
    margin: 3%;
}

#szin{
    flex-basis: 15% !important;
    height: 4vh !important;
    padding: 0.5vh 0.7vh !important;
    cursor: pointer;
}

/* képgaléria */

#gallery {
    max-width: 100% !important;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    /* z-index: 2; */
}

div.galleria-container {
    margin: auto;
    max-width: 100%;
    height: auto;
}

/* FOOTER */

footer {
    flex: 1 1 100%;

    align-items: center;
    text-align: center;
    justify-content: space-evenly;
    font-size: var(--kicsi);
    font-weight: bold;

    background-color: rgba(151, 10, 10, 0.501);
    padding: 1vmax;
}

@media all and (min-width: 600px) {
    /*tablet*/

    main {
        flex-basis: 100%;
    }

    aside {
        flex-basis: 100%;
    }

    .pirosSzurke .szoveg {
        flex-basis: 47%;
    }

    .pirosSzurke .kep {
        flex-basis: 47%;
    }

    #információk section div:nth-child(1) {
        flex: 1 1 46%;
    }

    #információk section div:nth-child(2) {
        flex: 1 1 52%;
    }
}

@media all and (min-width: 768px) {
    /*számítógép*/

    main {
        flex-basis: 75%;
    }

    aside {
        flex-basis: 25%;
    }

    #asideButton {
        flex-basis: 15%;
        flex-grow: 0;
    }

    aside nav {
        flex-basis: 100%;
    }

    aside ul li {
        flex-basis: 100%;
    }

    #sitesButton {
        flex-basis: 1%;
    }

    .pirosSzurke .szoveg {
        flex-basis: 42%;
    }

    .pirosSzurke .kep {
        flex-basis: 52%;
    }

    #információk section div:nth-child(1) {
        flex: 1 1 37%;
    }

    #információk section div:nth-child(2) {
        flex: 1 1 57%;
    }

    .kosarForm div:nth-child(1) {
        flex: 1 1 10%;
    }

    .kosarForm div:nth-child(2) {
        flex: 1 1 10%;
    }

    .kosarForm div:nth-child(3) {
        flex: 1 1 10%;
    }

    .kosarForm div:nth-child(4) {
        flex: 1 1 70%;
    }


    #kosar div {
        flex-basis: 36%;
    }

    #rendelesForm {
        flex-basis: 60%;
    }

    #kosarTartalma {
        flex-basis: 100%;
        margin-bottom: 2vmin;
    }

    #kosar div article:nth-child(2) {
        flex-basis: 100%;
    }
}