:root{
    /* BETUTIPUS */
    --font-cim: "Merriweather", serif;
    --font-alap: "Quicksand", sans-serif;
    --font-icon: "Material Symbols Rounded";

    --font-cim-regular: 400;
    --font-alap-regular: 500;
    --font-alap-bold: 600;

    --font-xxs: 8pt;
    --font-xs: 10pt;
    --font-s: 12pt;
    --font-m: 18pt;
    --font-l: 22pt;
    --font-xl: 30pt;
    --font-h1: 28pt;

    --font-spacing-s: 1px;
    --font-spacing-m: 2px;

    --line-height-m: 125%; 
    --line-height-l: 150%;  
    --line-height-xl: 175%;  


    /* SPACING */
    --space-xxs: .25rem;
    --space-xs: .5rem;
    --space-s: 1rem;
    --space-m: 2rem;
    --space-l: 4rem;
    --space-xl: 6rem;
    --space-xxl: 8rem;

    --space-sides: 16%;
    --space-sides-szerkesztobar: 5%;
    
    
    /* GAP */
    --gap-xs: var(--space-xxs);
    --gap-s: var(--space-xs);
    --gap-m: var(--space-s);
    --gap-l: var(--space-m);
    --gap-xl: var(--space-xl);
    
    
    /* BORDER */
    --border-xxs: 1px;
    --border-xs: 2px;
    --border-s: 4px;
    --border-m: 6px;
    --border-l: 10px;
    
    --radius-s: 32px;
    --radius-m: 10px;
    --radius-l: 104px;
    --radius-esemeny: 32px;
    
    --shadow-s: 8px;
    --shadow-m: 16px;
    --shadow-l: 32px;
    --shadow-xl: 64px;
    --shadow-xxl: 128px;
    
    
    /* TRANSITION */
    --animacio-s: 0.1s;
    --animacio-m: 0.2s;
    --animacio-l: 0.4s;
    --animacio-xl: 0.6s;
    --animacio-xl: 1s;
    
    --opacity-xxxs: 10%;
    --opacity-xxs: 20%;
    --opacity-xs: 30%;
    --opacity-s: 60%;
    --opacity-m: 80%;
    --opacity-l: 90%;
    
    
    /* EGYEB */
    --height-navbar: 60px;
    --height-header: 158px; /* dev tools-ból leolvasva */
    --height-maintop: calc(28rem + var(--height-navbar));
    --height-centerbagoly: 50px;
    --outline: var(--border-xs) solid currentColor;
    --outline-offset: var(--space-xs);
    
    
    /* SZINEK */
    --fekete: #000000;
    --rgb-fekete: 0, 0, 0;
    --feher: #ffffff;
    --rgb-feher: 255, 255, 255;

    --barna: #A86E43;
    --rgb-barna: 168, 110, 67;
    --vilagos-barna: #ddcfa6;
    --rgb-vilagos-barna: 221, 207, 166;
    --szurke: #333C3E;
    --rgb-szurke: 51, 60, 62;
    --vilagos-szurke: #53666A;
    --rgb-vilagos-szurke: 83, 102, 106;
    --kek: #CDDCDF;
    --rgb-kek: 205, 220, 223;
    --sotet-kek: #A0B6BC;
    --rgb-sotet-kek: 160, 182, 188;

    --link: #0B90BC;
    --rgb-link: 11, 144, 188;
    --vilagos-link: #9CD3E2;
    --rgb-vilagos-link: 156, 211, 226;
    
    --voros: #870000;
    --rgb-voros: 135, 0, 0;
    --sarga: #F2BD00;
    --rgb-sarga: 242, 189, 0;

    --kreta-kek: #30A8CB;
    --rgb-kreta-kek: 48, 168, 203;
}





/*** MOBIL ***/
@media all and (max-width: 1200px){
    :root{
        --space-sides: 8%;
        --height-maintop: calc(24rem + var(--height-navbar));
    }
}
@media all and (max-width: 800px){
    :root{
        --space-sides: 4%;
    }
}
@media all and (max-width: 600px){
    :root{
        --font-xxs: 8pt;
        --font-xs: 10pt;
        --font-s: 12pt;
        --font-m: 16pt;
        --font-l: 20pt;
        --font-xl: 26pt;
    }
}