:root {
    color-scheme: light dark;
    --zold-0: rgb(65, 138, 83);
    --zold-1: rgb(93, 196, 119);
    --piros-0: rgb(133, 64, 64);
    --piros-1: rgb(190, 94, 94);
}

@media(prefers-color-scheme: dark) {
    :root {
        --szint-0-szin: rgb(0,0,0);
        --szint-1-szin: rgb(30,30,30);
        --szint-2-szin: rgb(60,60,60);
        --szint-3-szin: rgb(90,90,90);
        --szint-4-szin: rgb(120,120,120);
        --szint-5-szin: rgb(150,150,150);
        --szint-6-szin: rgb(180,180,180);
        --szint-7-szin: rgb(210,210,210);
        --szint-8-szin: rgb(240,240,240);
        --szint-9-szin: rgb(255,255,255);
    }
    body { 
        background-color: var(--szint-0-szin);
        color: rgb(200, 200, 200);
    }
    h1, h2, h3, h4, h5, h6, p { color: rgb(200, 200, 200); }
    .arnyek { text-shadow: 0 2px 3px rgb(100,100, 100); }
    .szint-0 { background-color: var(--szint-0-szin); box-shadow: 0px 0px 5px 0px var(--szint-0-szin); }
    .szint-1 { background-color: var(--szint-1-szin); box-shadow: 0px 0px 5px 0px var(--szint-0-szin); }
    .szint-2 { background-color: var(--szint-2-szin); box-shadow: 0px 0px 5px 0px var(--szint-1-szin); }
    .szint-3 { background-color: var(--szint-3-szin); box-shadow: 0px 0px 5px 0px var(--szint-2-szin); }
    .szint-4 { background-color: var(--szint-4-szin); box-shadow: 0px 0px 5px 0px var(--szint-3-szin); }
    .szint-5 { background-color: var(--szint-5-szin); box-shadow: 0px 0px 5px 0px var(--szint-4-szin); }
    .szint-6 { background-color: var(--szint-6-szin); box-shadow: 0px 0px 5px 0px var(--szint-5-szin); }
    .szint-7 { background-color: var(--szint-7-szin); box-shadow: 0px 0px 5px 0px var(--szint-6-szin); }
    .szint-8 { background-color: var(--szint-8-szin); box-shadow: 0px 0px 5px 0px var(--szint-7-szin); }
    .szint-9 { background-color: var(--szint-9-szin); box-shadow: 0px 0px 5px 0px var(--szint-8-szin); }
}

@media(prefers-color-scheme: light) {
    :root {
        --szint-0-szin: rgb(255,255,255);
        --szint-1-szin: rgb(245,245,245);
        --szint-2-szin: rgb(235,235,235);
        --szint-3-szin: rgb(225,225,225);
        --szint-4-szin: rgb(215,215,215);
        --szint-5-szin: rgb(205,205,205);
        --szint-6-szin: rgb(195,195,195);
        --szint-7-szin: rgb(185,185,185);
        --szint-8-szin: rgb(175,175,175);
        --szint-9-szin: rgb(165,165,165);
    }
    body { 
        background-color: var(--szint-0-szin);
        color: rgb(50, 50, 50);
    }
    h1, h2, h3, h4, h5, h6, p { color: rgb(50, 50, 50); }
    .szint-0 { background-color: var(--szint-0-szin); box-shadow: 0px 0px 5px 0px var(--szint-3-szin); }
    .szint-1 { background-color: var(--szint-1-szin); box-shadow: 0px 0px 5px 0px var(--szint-4-szin); }
    .szint-2 { background-color: var(--szint-2-szin); box-shadow: 0px 0px 5px 0px var(--szint-5-szin); }
    .szint-3 { background-color: var(--szint-3-szin); box-shadow: 0px 0px 5px 0px var(--szint-6-szin); }
    .szint-4 { background-color: var(--szint-4-szin); box-shadow: 0px 0px 5px 0px var(--szint-7-szin); }
    .szint-5 { background-color: var(--szint-5-szin); box-shadow: 0px 0px 5px 0px var(--szint-8-szin); }
    .szint-6 { background-color: var(--szint-6-szin); box-shadow: 0px 0px 5px 0px var(--szint-9-szin); }
    .szint-7 { background-color: var(--szint-7-szin); box-shadow: 0px 0px 5px 0px var(--szint-9-szin); }
    .szint-8 { background-color: var(--szint-8-szin); box-shadow: 0px 0px 5px 0px var(--szint-9-szin); }
    .szint-9 { background-color: var(--szint-9-szin); box-shadow: 0px 0px 5px 0px var(--szint-9-szin); }
}

.zold-0 { background-color: var(--zold-0); }
.zold-1 { background-color: var(--zold-1); }
.piros-0 { background-color: var(--piros-0); }
.piros-1 { background-color: var(--piros-1); }

.black { background-color: black; }

/* Egyedi classok */

h1 { font-size: 25px; }
h2 { font-size: 24px; }
h3 { font-size: 23px; }
h4 { font-size: 22px; }
h5 { font-size: 21px; }
h6 { font-size: 20px; }

* {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 19px;
}

.linkDekoracioTiltas {
    text-decoration: none;
    color: inherit;
}
.linkDekoracioTiltas:hover {
    text-decoration: none;
    color: inherit;
}
.linkDekoracioTiltas:visited {
    text-decoration: none;
    color: inherit;
}

.kozepre { margin: auto; display: block; }
.kozepre-szoveg { text-align: center; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.block { display: block; }
.fit-content { width: fit-content; width: -moz-fit-content; }
.no-border { border: 0px; }
.lathatatlan { visibility: hidden; }
.nodisplay { display: none; }
.max-szelesseg { width: 100%; }
.pointer { cursor: pointer; }

table.tablazat {
    border: 0.5px solid var(--szint-4-szin);
    border-collapse: collapse;
}

td.cella {
    border-top: 0.1px solid var(--szint-4-szin);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
}

@media screen and (min-width: 1023px) {
    .min-1024-tiltas { display: block; }
    .nagy-kepernyon-tiltas { display: none !important; }
    .mindig-lathato-nagy-kepernyon { visibility: visible !important; }
    .merettol-fuggoen-inline-block { display: inline; }
    .mobilon-inline { display: inline; }
}

@media screen and (max-width: 1023px) {
    .min-1024-tiltas { display: none; }
    .mobilon-tiltas { display: none !important; }
    .merettol-fuggoen-inline-block { display: block; }
    .mobilon-lathatatlan { visibility: hidden; }
}

/* Gombok */
.gomb {
    color: inherit;
    font-size: inherit;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
} 
@media(prefers-color-scheme: light) {
    .gomb {
        border: none;
    }
    .gomb:hover {
        filter: brightness(0.85);
    }
}
@media(prefers-color-scheme: dark) {
    .gomb {
        border: none;
        box-shadow: inset 0px 0px 5px 0 rgb(45 45 45), 0px 0px 5px 0 rgb(25 25 25);
    }
    .gomb:hover {
        box-shadow: inset 0px 0px 15px 0 rgb(90, 90, 90), 0px 0px 5px 0 rgb(25 25 25);
    }
}


/* Szélességek  */
.width-10 { width: 10%; }
.min-width-10 { min-width: 10%; }
.max-width-10 { max-width: 10%; }
.width-20 { width: 20%; }
.min-width-20 { min-width: 20%; }
.max-width-20 { max-width: 20%; }
.width-30 { width: 30%; }
.min-width-30 { min-width: 30%; }
.max-width-30 { max-width: 30%; }
.width-40 { width: 40%; }
.min-width-40 { min-width: 40%; }
.max-width-40 { max-width: 40%; }
.width-50 { width: 50%; }
.min-width-50 { min-width: 50%; }
.max-width-50 { max-width: 50%; }
.width-60 { width: 60%; }
.min-width-60 { min-width: 60%; }
.max-width-60 { max-width: 60%; }
.width-70 { width: 70%; }
.min-width-70 { min-width: 70%; }
.max-width-70 { max-width: 70%; }
.width-80 { width: 80%; }
.min-width-80 { min-width: 80%; }
.max-width-80 { max-width: 80%; }
.width-90 { width: 90%; }
.min-width-90 { min-width: 90%; }
.max-width-90 { max-width: 90%; }
.width-100 { width: 100%; }
.min-width-100 { min-width: 100%; }
.max-width-100 { max-width: 100%; }

/* Kerekítések */
.kerekites-5 { border-radius: 5px; }
.kerekites-10 { border-radius: 10px; }
.kerekites-15 { border-radius: 15px; }
.kerekites-20 { border-radius: 20px; }
.kerekites-25 { border-radius: 25px; }
.kerekites-30 { border-radius: 30px; }
.kerekites-35 { border-radius: 35px; }
.kerekites-40 { border-radius: 40px; }

/* Tabok */
.tab-1 { margin-left: 19px; }
.tab-2 { margin-left: 38px; }
.tab-3 { margin-left: 57px; }
.tab-4 { margin-left: 76px; }
.tab-5 { margin-left: 95px; }
.tab-6 { margin-left: 114px; }

/* Marginok */
.margin-5 { margin: 5px; }
.margin-10 { margin: 10px; }
.margin-15 { margin: 15px; }
.margin-20 { margin: 20px; }
.margin-25 { margin: 25px; }

/* Paddingek */
.padding-5 { padding: 5px; }
.padding-10 { padding: 10px; }
.padding-15 { padding: 15px; }
.padding-20 { padding: 20px; }
.padding-25 { padding: 25px; }
.padding-30 { padding: 30px; }

/* z-index */
.zindex-0 { z-index: 0; }
.zindex-1 { z-index: 1; }
.zindex-2 { z-index: 2; }
.zindex-3 { z-index: 3; }
.zindex-4 { z-index: 4; }
.zindex-5 { z-index: 5; }
.zindex-6 { z-index: 6; }
.zindex-7 { z-index: 7; }
.zindex-8 { z-index: 8; }
.zindex-9 { z-index: 9; }

/* Betűméretek */
.f5 { font-size: 5px; }
.f10 { font-size: 10px; }
.f15 { font-size: 15px; }
.f20 { font-size: 20px; }
.f25 { font-size: 25px; }
.f30 { font-size: 30px; }
.f35 { font-size: 35px; }
.f40 { font-size: 40px; }
.f45 { font-size: 45px; }
.f50 { font-size: 50px; }
.f55 { font-size: 55px; }
.f60 { font-size: 60px; }

/* Animációk */
@keyframes height-novekedes-sigmoid {
        0%  {   height: 0%;
                visibility: visible !important;
            }
    100%    {   height: 100%;
            }
}

@keyframes height-csokkenes-sigmoid {
    0%      {   height: 100%;
            }
    100%    {   height: 0%;
                visibility: hidden !important;
                padding: 0px;
            }
}