/*sizes nav*/

body {
    --burger-line-height: 4px;
    --nav-icon-height: 24px;
    --nav-icon-width: 47px;
    --nav-icon-padding-X: 2.4vw;
    --nav-icon-padding-Y: 3.1vw;
    --heigt-icon: 35px;
    --gap-logo: 13px;
    --nav-bar-pad: 30px;
}

/*sizes,pad,marg*/

:root {
    --h1-font-size: min(calc(14px + (17 - 14) * ((100vw - 375px) / (1920 - 375))), 17px);
    --h2-font-size: min(calc(23px + (60 - 23) * ((100vw - 375px) / (1920 - 375))), 60px);
    --h3-font-size: min(calc(18px + (40 - 18) * ((100vw - 375px) / (1920 - 375))), 30px);
    --h4-font-size: min(calc(13px + (20 - 13) * ((100vw - 375px) / (1920 - 375))), 20px);
    --h5-font-size: min(calc(13px + (13 - 13) * ((100vw - 375px) / (1920 - 375))), 13px);
    --btn-font-size: min(calc(13px + (13 - 13) * ((100vw - 375px) / (1920 - 375))), 13px);
    --base-font-size: min(calc(16px + (20 - 16) * ((100vw - 375px) / (1920 - 375))), 20px);
    --btn-small-font-size: min(calc(12px + (12 - 12) * ((100vw - 375px) / (1920 - 375))), 12px);
    --gap-s: min(calc(8px + (10 - 8) * ((100vw - 375px) / (1920 - 375))), 10px);
    --gap-m: min(calc(15px + (30 - 15) * ((100vw - 375px) / (1920 - 375))), 30px);
    --gap-l: min(calc(30px + (50 - 30) * ((100vw - 375px) / (1920 - 375))), 50px);
    --gap-xl: min(calc(50px + (80 - 50) * ((100vw - 375px) / (1920 - 375))), 80px);
    --gap-2xl: min(calc(80px + (150 - 80) * ((100vw - 375px) / (1920 - 375))), 150px);
    --cont-gap: min(calc(100px + (250 - 100) * ((100vw - 375px) / (1920 - 375))), 250px);
    --main-color: #e6007e;
}

/*fonts*/

:root {
    --mainfont: 'Josefin Sans';
    --headlinefont: 'Yeseva One';
}


/*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) {
    /*----------------- ELEMENT -------------*/
    /*----------------- END ELEMENT ---------*/
}

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

@media (max-width: 576px) {}

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

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