/* Green Bananas 07/2023 */

:root {

    /* 
        Colors 
    */
    --clr-primary: #575D82;
    --clr-secondary: #B3CACF;

	/* Other Colors */
    --clr-natural-dark: #000;
    --clr-natural-light: #fff; 

    --clr-support: #efefefef; 

    --txt-clr-basic: #050c00;
    --txt-clr-primary: var(--clr-primary);
    --txt-clr-secondary: red;

    --clr-border-neutraal: #b9b9b9;

    /* Hover */
    --clr-hover: #818d69;
    --clr-hover-txt: black;
    --hover-border: 5px solid var(--clr-hover);  

    /*
       Border 
    */
    --border-min:  1px solid;
    --border-max: 5px solid;

    /* Border Radius */
    --radius-max: 50px;
    --radius-min: 0; 

    /* Box Shawods */
    --shadow-1: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    --shadow-2: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;

    /*
       Fonts
    */
    /* Font size */
    --f-size-basic: 14px; /* basis font size voor bijv. p span ezv. */
    --f-size-1: 50px;
    --f-size-2: 37px;
    --f-size-3: 39px;
    --f-size-4: 30px;
    --f-size-5: 21px;
	--f-size-6: 18px;

    /* Font line-height */
    --lhf-basic: 19px ; 
    --lhf-1: 60px;
	--lhf-2: 43px;
	--lhf-3: 44px;
	--lhf-4: 35px;
	--lhf-5: 25px;
	--lhf-6: 22px;

    /* Font weight */
    --f-weight-max: 500;
    --f-weight-min: 100;

    /* Font Family */
    --ff-primary: "aileron", sans-serif;
    --ff-secondary: "aileron", sans-serif;
  }



/* Responsief font size */
@media (max-width: 1540px){
    :root {
    /* Font size */
    --f-size-basic: 14px; /* basis font size voor bijv. p span ezv. */
    --f-size-1: 40px;
    --f-size-2: 34px;
    --f-size-3: 30px;
    --f-size-4: 24px;
    --f-size-5: 20px;
	--f-size-6: 19px;

    /* Font line-height */
    --lhf-basic: 19px ; 
    --lhf-1: 50px;
	--lhf-2: 40px;
	--lhf-3: 36px;
	--lhf-4: 29px;
	--lhf-5: 25px;
	--lhf-6: 22px;

    }
}

@media (max-width: 1212px){
    :root {
    /* Font size */
    --f-size-basic: 15px; /* basis font size voor bijv. p span ezv. */
    --f-size-1: 30px;
    --f-size-2: 28px;
    --f-size-3: 24px;
    --f-size-4: 21px;
    --f-size-5: 19px;
	--f-size-6: 18px;

    /* Font line-height */
    --lhf-basic: 25px ; 
    --lhf-1: 36px;
	--lhf-2: 34px;
	--lhf-3: 29px;
	--lhf-4: 25px;
	--lhf-5: 24px;
	--lhf-6: 21px;

    }
}

@media (max-width: 1024px){
    :root {
     --f-size-basic: 15px; /* basis font size voor bijv. p span ezv. */
    --f-size-1: 26px;
    --f-size-2: 23px;
    --f-size-3: 20px;
    --f-size-4: 19px;
    --f-size-5: 17px;
	--f-size-6: 16px;

    /* Font line-height */
    --lhf-basic: 25px ; 
    --lhf-1: 32px;
	--lhf-2: 28px;
	--lhf-3: 25px;
	--lhf-4: 23px;
	--lhf-5: 21px;
	--lhf-6: 18px;

    }
}

@media (max-width: 767px){
    :root {
     --f-size-basic: 15px; /* basis font size voor bijv. p span ezv. */
    --f-size-1: 27px;
    --f-size-2: 24px;
    --f-size-3: 22px;
    --f-size-4: 20px;
    --f-size-5: 17px;
	--f-size-6: 16px;

    /* Font line-height */
    --lhf-basic: 25px ; 
    --lhf-1: 33px;
	--lhf-2: 29px;
	--lhf-3: 26px;
	--lhf-4: 24px;
	--lhf-5: 21px;
	--lhf-6: 19px;

    }
}

@media (max-width: 600px){
    :root {
      --f-size-basic: 15px; /* basis font size voor bijv. p span ezv. */
    --f-size-1: 24px;
    --f-size-2: 22px;
    --f-size-3: 19px;
    --f-size-4: 18px;
    --f-size-5: 17px;
	--f-size-6: 16px;

    /* Font line-height */
    --lhf-basic: 25px ; 
    --lhf-1: 30px;
	--lhf-2: 25px;
	--lhf-3: 23px;
	--lhf-4: 21px;
	--lhf-5: 19px;
	--lhf-6: 17px;

    }
}