/* ===============================================
CONFIG VALUES
================================================== */
:root
{
    --fs:                     1.5rem;

    --f1-big-title:           2.4rem;
    --f1:                     2.2rem;
    --f2:                     1.8rem;
    --f3:                     1.8rem;
    --f4:                     1.6rem;
    --f5:                     1.5rem;
    --f6:                     1.3rem;
    --f7:                     1.1rem;
    
    --size-x1:                3.0rem;

    --size-x0-125:            calc(var(--size-x1) / 8);
    --size-x0-25:             calc(var(--size-x1) / 4);
    --size-x0-3:              calc(var(--size-x1) / 3);
    --size-x0-4:              calc(var(--size-x1) / 2.5);
    --size-x0-5:              calc(var(--size-x1) / 2);
    --size-x0-6:              calc(var(--size-x1) / 1.5);
    --size-x0-75:             calc(var(--size-x1) / 1.3333);

    --size-x1-33:             calc(var(--size-x1) * 1.3333);
    --size-x1-5:              calc(var(--size-x1) * 1.5);
    --size-x2:                calc(var(--size-x1) * 2);
    --size-x2-5:              calc(var(--size-x1) * 2.5);
    --size-x3:                calc(var(--size-x1) * 3);
    --size-x4:		          calc(var(--size-x1) * 4);
    --size-x5:		          calc(var(--size-x1) * 5);
    --size-x6:		          calc(var(--size-x1) * 6);
    
    --border-regular:         0.1rem;
    --border-medium:          0.3rem;
    --border-bold:            0.7rem;
    
    --border-radius:          0.5rem;
    --image-radius:           0.5rem;
    
    --fw-regular:             400;
    --fw-medium:              500;
    --fw-bold:                600;
    --fw-bolder:              700;
    --fw-black:               800;
    
    --fw-t-regular:           400;
    --fw-t-medium:            400;
    --fw-t-bold:              500;
    --fw-t-bolder:            600;
    --fw-t-black:             700;
}


/* ===============================================
LAYOUT FOR XLARGE
================================================== */
body
{
    overflow-x: clip;
    overflow-y: scroll;
    width: 100%;
    height: 100vh;
    
    background: var(--body-background);
    font: var(--fs)/var(--size-x1) 'Rubik', Arial, sans-serif;
    color: var(--body-color);
}

section.section.header-top-bar                                              { display: block; }
section.section.header-desktop                                              { display: block; }
section.section.header-mobile                                               { display: none; }
section.section.header-slayt                                                { display: block; }
section.section.header-search                                               { display: block; }
section.section.header-dir       .dir-icon                                  { display: block; }


/* ===============================================
LAYOUT FOR LARGE
================================================== */
@media handheld, only screen and (max-width: 1399px)
{
    /* Config Values */
    :root
    {
        --fs:                     1.5rem;

        --f1-big-title:           2.4rem;
        --f1:                     2.2rem;
        --f2:                     1.8rem;
        --f3:                     1.8rem;
        --f4:                     1.6rem;
        --f5:                     1.5rem;
        --f6:                     1.3rem;
        --f7:                     1.1rem;
    }
}


/* ===============================================
LAYOUT FOR TABLET
================================================== */
@media only screen and (max-width: 1224px)
{
    section.section.header-top-bar                                          { display: none; }
    section.section.header-desktop                                          { display: none; }
    section.section.header-mobile                                           { display: block; }
    section.section.header-slayt                                            { display: block; }
    section.section.header-search                                           { display: block; }
    section.section.header-dir       .dir-icon                              { display: none; }
}


/* ===============================================
LAYOUT FOR MOBILE
================================================== */
@media handheld, only screen and (max-width: 640px)
{
    /* Config Values */
    :root
    {
        --fs:                     1.5rem;

        --f1-big-title:           2.4rem;
        --f1:                     2.0rem;
        --f2:                     1.8rem;
        --f3:                     1.8rem;
        --f4:                     1.6rem;
        --f5:                     1.5rem;
        --f6:                     1.3rem;
        --f7:                     1.1rem;
    }
}