:root{
    --debuger: 50px;
    --sizer: 10;
    --separator: 0px black solid;

    /*--background-color: black;*/
    --background-img: url("background.jpg");

    --body-color: white;
    --body-x-margin: calc(var(--sizer) * var(--sizer) * 1px);
    --body-y-margin: calc(var(--sizer) * 1px + var(--debuger));

    --header-color: white;
    --header-height: calc(var(--body-x-margin));
    --header-padding: calc(var(--sizer) * 1px);

    --logo-size: calc(var(--sizer) * 5px);
    --logo-margin: calc((var(--header-height) - var(--logo-size)) / 2);
    --logo-gap: calc(var(--logo-size) / 2);

    --footer-color: grey;
    --footer-height: calc(var(--body-x-margin));

    --img-size: calc((100wv - var(--body-x-margin) * 2 - 3 * 10px) / 4);




    --unit0: 4px;
    --unit1: 10px;
    --unit2: 22px;
    --unit3: 48px;
    --unit4: 76px;
    --unit5: 96px;
    --unit6: 244px;
    --unit7: 512px;
    --unit8: 648px;
    --unit9: 1028px;

    --menu-cols: 1;
    --articles-cols: 4;
    --scrollbar-width: 34px;
    --form-cols: 2;

    --background-color: white;
    --background-blur: 7px;

    --font1: Montserrat, serif;
    --font2: Merriweather, serif;

    --clicked: 'true';

    --debug-color-y: white;/*yellow;*/
    --debug-color-c: white;/*chocolate;*/
    --debug-color-a: white;/*aqua;*/
    --debug-color-ca: white;/*chartreuse;*/
    --debug-color-br: white;/*chartreuse;*/
    --debug-color-bl: white;/*blueviolet;*/
    --debug-color-r: white;
    --debug-color-g: rgb(50,50,50);
}

@media screen and (max-width: 800px){
    :root{
        --articles-cols: 3;
    }
}



@media screen and (max-width: 400px){
    :root{
        --articles-cols: 1;
    }
    .wrapper{
        max-width: 400px;
    }
}