/*! _variables.css */

/******************************   V A R I A B L E N   ******************************/

:root {

    --transition: all 0.5s ease-in-out;
    --border-radius: 40px;
    --border-radius_small: 20px;
    --border-radius_extra_small: 14px;
    --box-shadow: 0 5px 19px 0 rgba(0, 0, 0, 0.17);
}

/******************************   C O L O R S  ******************************/

:root {

    --red: #ad1839;
    --filter_red: invert(14%) sepia(86%) saturate(2937%) hue-rotate(332deg) brightness(94%) contrast(97%);
    --filter_grey: invert(86%) sepia(1%) saturate(273%) hue-rotate(51deg) brightness(93%) contrast(89%);
    --bullet_background: #d4a7a4;

    --grey_dark: #5a5a5a;
    --grey_medium-dark: #7f7f7f;
    --grey_medium: #808080;
    --grey_medium-light: #a2a2a2;
    --grey_light: #c3c3c3;
    --grey_light_light: #ededed;

    --white: #FFFFFF;
    --black: #000000;
    --medium-black: #3e3d3d;
    --text-color-dark: #5a5a5a;
    --text-color-light: #FFFFFF;

    --background-color-1: #FFFFFF;
    --background-color-2: #ededed;
    --background-color-3: #5a5a5a;

    --border-color-1: #5a5a5a;
    --border-color-2: #bd0035;
}

/******************************   E X P L A N A T I O N  ******************************/
/*


name of variables:

--TAG_DEFINITION: value 


using clamp

E.g. clamp(1.6rem, calc(1.67rem + -0.19vw), 1.4rem);
clamp generator: https://observablehq.com/@saneef/fluid-typography-css-clamp-value-generator

Viewport: min = 360px
Viewport: max = Breite Container
Viewport: max = 1640px


RemBase = 16 

Color Filter for SVG:
https://codepen.io/sosuke/pen/Pjoqqp

px to em
https://www.w3schools.com/cssref/css_pxtoemconversion.php



100 – Thin.
200 – Extra Light (Ultra Light)
300 – Light.
400 – Normal.
500 – Medium.
600 – Semi Bold (Demi Bold)
700 – Bold.
800 – Extra Bold (Ultra Bold)


*/


/******************************   T Y P O G R A P H Y  ******************************/

:root {

    /*
    
    Proxima to Verdana: 
    
    Verdana Font-Size = Proxima Font-Size - 10%

    */

    --font-size_162: clamp(5rem, calc(1.89rem + 7.97vw), 11.3rem);
    --font-size_130: clamp(5rem, calc(3.02rem + 6.09vw), 9.1rem);
    --font-size_113: clamp(4rem, calc(2.48rem + 5.38vw), 7.4rem);
    --font-size_88: clamp(4.5rem, calc(3.23rem + 3.4vw), 6.2rem);
    --font-size_71: clamp(2.4rem, calc(2.43rem + 2.85vw), 5rem);
    --font-size_50: clamp(2.2rem, calc(1.76rem + 1.98vw), 3.5rem);
    --font-size_44: clamp(1.8rem, calc(1.03rem + 2.06vw), 3rem);
    --font-size_35: clamp(1.6rem, calc(1.03rem + 2.06vw), 2.4rem);
    --font-size_30: clamp(1.8rem, calc(1.62rem + 0.47vw), 2.1rem);
    --font-size_29: clamp(1.4rem, calc(1.62rem + 0.47vw), 2rem);
    --font-size_24: clamp(1.3rem, calc(1.62rem + 0.47vw), 1.7rem);
    /* Proxima 24 = Verdana 22 */
    --font-size_22: clamp(1.5rem, calc(1.82rem + 0.23vw), 1.8rem);
    --secondary-h2-font-size: clamp(1.6rem, calc(0.91rem + 1.77vw), 3rem);

    /* cards */
    --font-size_21-12: clamp(1.2rem, calc(0.95rem + 0.7vw), 2.1rem);
    --font-size_19-11: clamp(1.1rem, calc(0.88rem + 0.63vw), 1.6rem);
    --font-size_19-12: clamp(1.2rem, calc(1rem + 0.55vw), 1.6rem);
    --font-size_26-12: clamp(1.2rem, calc(0.81rem + 1.09vw), 2rem);
    --font-size_162-72: clamp(5.8rem, calc(3.67rem + 5.69vw), 13rem);

    --clamp_20-12: clamp(1.1rem, calc(0.98rem + 0.63vw), 1.4rem);

    --margin-xxs: 9px;
    --margin-xs: clamp(1.2rem, calc(1.07rem + 0.37vw), 1.5rem);
    --margin-s: clamp(1.4rem, calc(1.09rem + 0.85vw), 2.1rem);
    --margin-m: clamp(1.8rem, calc(1.27rem + 1.46vw), 3rem);
    --margin-l: clamp(2.2rem, calc(1.32rem + 2.44vw), 4.2rem);
    --margin-xl: clamp(3.4rem, calc(2.26rem + 3.17vw), 6rem);
    --margin-xxl: clamp(6rem, calc(4.24rem + 4.88vw), 10rem);

    --icon-medium: clamp(2.5rem, calc(1.96rem + 1.39vw), 3.6rem);
    --icon-medium-padding: 1rem;
    --font-size-pagitation: 1.2rem;
    --icon-big: clamp(3.2rem, calc(2.21rem + 2.53vw), 5.2rem);

    /*  B O D Y  */
    /*--body_font-family: 'Proxima Nova', Arial, Helvetica, sans-serif;
    --title_font-family: 'Proxima Nova Extra-bold', Arial, Helvetica, sans-serif;
    */
    --body_font-family: Verdana, Arial, Helvetica, sans-serif;
    --body_color: var(--text-color-dark);
    --body_font-size: var(--font-size_24);
    --body_font-weight: normal;
    --body_line-height: normal;
    --body_margin-bottom: 2rem; /* stil do define*/


    /*  H 1  */
    --h1_color: var(--text-color-dark);
    --h1_font-size: var(--font-size_130);
    --h1_font-weight: 800;
    --h1_line-height: 1.09;
    --h1_margin-bottom: 2rem;
    --h1_text-transform: uppercase;

    /*  H 2  */
    --h2_color: var(--red);
    --h2_font-size: var(--font-size_113);
    --h2_font-weight: 800;
    --h2_line-height: 1.05;
    --h2_margin-bottom: 2.2rem;
    --h2_text-transform: uppercase;
    /*--h2_margin-top: clamp(5rem, calc(3.98rem + 2.83vw), 8rem);*/


    /*  H 3  */
    --h3_color: var(--red);
    --h3_font-size: var(--font-size_71);
    --h3_font-weight: 800;
    --h3_line-height: 1.45;
    --h3_margin-bottom: 2.2rem;
    --h3_text-transform: uppercase;

    /*  H 4 */
    --h4_color: var(--red);
    --h4_font-size: var(--font-size_35);
    --h4_font-weight: 700;
    --h4_line-height: 1.25;
    --h4_margin-bottom: 2rem;
    --h4_text-transform: uppercase;

    /*  H 5  */
    --h5_color: var(--red);
    --h5_font-size: var(--font-size_24);;
    --h5_font-weight: 700;
    --h5_line-height: var(--body_line-height);
    --h5_margin-bottom: 2rem;
    --h5_letter-spacing: 0;
    --h5_text-transform: uppercase;

    /*  H 6  */
    /*    --h6_color: var(--text-color-dark);
    --h6_font-size: 1.8rem;
    --h6_font-weight: 500;
    --h6_line-height: 1.2;
    --h6_margin-bottom: 0.8em;
*/
    /*  T O P L I N E  */
    /*--topline_font-size: 1.4rem;
    --topline_font-weight: 500;
    --topline_color: var(--text-color-dark);
    --topline_line-height: 1;
    --topline_letter-spacing: 2.4px;
    --topline_margin-bottom: 47px;
    --topline_text-transform: uppercase;
*/
}

@media (max-width: 991px) {
    :root {
        /*--font-size_71: clamp(2.4rem, calc(2.43rem + 2.85vw), 5rem);*/
        --font-size_71: clamp(2rem, calc(1.8rem + 2.5vw), 4rem);
        --h3_font-size: var(--font-size_71);
    }
}

@media (max-width: 767px) {
    :root {
        --font-size_130: clamp(2.5rem, calc(1.5rem + 3.5vw), 4.05rem);
        --font-size_113: clamp(2rem, calc(1.24rem + 2.69vw), 3.7rem);
        --font-size_71: clamp(1.8rem, calc(1.5rem + 2vw), 3rem);

        --h1_font-size: var(--font-size_130);
        --h2_font-size: var(--font-size_113);
        --h3_font-size: var(--font-size_71);
    }
}

@media (max-width: 480px) {
    :root {
        --font-size_71: clamp(1.5rem, calc(1rem + 1.2vw), 2rem);

        --h3_font-size: var(--font-size_71);
    }
}