/*sizes nav*/

body {
    --burger-line-height: 2px;
    --nav-icon-height: 10px;
    --nav-icon-width: 17px;
    --nav-icon-padding-X: 2.4vw;
    --nav-icon-padding-Y: 3.1vw;
}

/*sizes,pad,marg*/

:root {
    --margin-bottom-row: clamp(70px, 14vw, 128px);
    --padding-mehr-abstand: 2vw;
    --content-width: 1170px;
    --content-width-responsive: 90vw;
    --margin-tabblock: 10rem;
    --polaroid-gap: 4.5vw;
    --height-calculus: calc(100vh - max(127px, 7vw));
    --header-space-X-1: clamp(25px, 4vw, 60px);
    --header-space-X-2: clamp(35px, 5vw, 80px);
    --header-space-Y: clamp(25px, 3vw, 40px);
    --gap-xxs: 16px;
    --gap-xs: clamp(14px, 5vw, 16px);
    --gap-s: clamp(20px, 4vw, 32px);
    --gap-m: clamp(32px, 4vw, 56px);
    --gap-l: clamp(32px, 4.65vw, 80px);
    --gap-xl: clamp(32px, 9vw, 128px);
    --gap-xxl: clamp(40px, 13vw, 192px);
    --font-size-btn: 13px;
    --icon-size: 16px;
    --icon-size-m: 18px;
    --header-icons-line-height: 1.65;

}


/*fonts*/

:root {
    --mainfont: 'Poppins';
    --headlinefont: 'swear-display';
}


/*VC*/

@media (min-width: 1920px) {
    /*----------------- ELEMENT -------------*/
    /*----------------- END ELEMENT ---------*/
}

@media (max-width: 1500px) {
    :root {
        --polaroid-gap: 6vw;
    }
}

@media (max-width: 1200px) {
    /*----------------- ELEMENT -------------*/
    /*----------------- END ELEMENT ---------*/
}

@media (max-width: 1024px) {
    :root {
        --polaroid-gap: 8vw;
    }
}

@media (max-width: 990px) {
    :root {
        --header-icons-line-height: 1.25;
    }
}

@media (max-width: 768px) {
    /*----------------- ELEMENT -------------*/
    /*----------------- END ELEMENT ---------*/
}

@media (max-width: 576px) {
    :root {
        --gap-xxs: 4px;
    }
}

@media (max-width: 420px) {
    /*----------------- ELEMENT -------------*/
    /*----------------- END ELEMENT ---------*/
}

@media (max-width: 320px) {
    /*----------------- ELEMENT -------------*/
    /*----------------- END ELEMENT ---------*/
}