:root {
/* COLOURS */
--primary-color-l: rgb(240,235,228);
  --primary-color-l-tint: rgba(240,235,228,.2);
--primary-color-d: rgb(35,30,33);
--primaryColorM: rgba(35,30,33,.6);

  /*  main */
  --primaryPurpleColor: rgb(76,32,68);
  --secondaryPurpleColor: rgb(106,38,89); 
  
  --primary-yellow-color: rgba(255, 180, 0, 1);
  --primary-yellow-color-tint:  rgba(255, 180, 0, .25);
    --primary-yellow-colorC:  rgba(255, 180, 0, .8);
  
  --hover-color: rgba(205, 110, 40, .2);
    --hover-color-card: rgb(205, 110, 40);

  /*  spring */
  --primaryPurpleColor: rgb(76,32,68);
  --secondaryPurpleColor: rgb(106,38,89); 
  
  --primaryYellowColor:  rgba(255, 180, 0, 1);
  --primaryYellowColorTint:  rgba(255, 180, 0, .25);
    --primary-yellow-colorC:  rgba(255, 180, 0, .8);
  
  --hover-color: rgba(205, 110, 40, .2);
    --hover-color-card: rgb(205, 110, 40);

  /*  summer */
  --primary-summer-color: rgba(233, 207, 142, 1);
  --secondary-summer-color: #135e0a; 
  --accent-summer-color: #f8a538;
  
  --btn-summer-color:  #bcbcbc;

  /*  autumn */
  --primary-autumn-color: rgb(199, 108, 121);
  --secondary-autumn-color: #563131; 
  --accent-autumn-color: #df5627;
  
  --btn-autumn-color:  #bcbcbc;  

  /*  winter */
  --primary-winter-color: rgba(66,80,108,1);
  --secondary-winter-color: rgba(29,44,81,1); 
  --accent-winter-color: rgba(223,86,39,1);
  --accent-winter-color-tint: rgba(26,216,211,.4);
  
  --btn-winter-color:  rgba(188,188,188,1);  

/* SPACING */

/* 1x */
--five-spacing: .5rem;

    /* 1  and 0 */
    --five-spacing-v: .5rem 0;
    --five-spacing-h: 0 .5rem;

/* 1x */
--ten-spacing: 1rem;

    /* 1  and 0 */
    --ten-spacing-v: 1rem 0;
    --ten-spacing-h: 0 1rem;

/* 2x */
--twenty-spacing: 2rem;
    
    /* 2x and 0 */
    --twenty-spacing-v: 2rem 0;
    --twenty-spacing-h: 0 2rem;

    /* 2x and 1x */
    --twenty-ten-spacing-v: 2rem 1rem;
    --twenty-ten-spacing-h: 1rem 2rem;

/* 30x */
--thirty-spacing: 3rem;
    
    /* 30 and 0 */
    --thirty-spacing-v: 3rem 0;
    --thirty-spacing-h: 0 3rem;

    /* 30 and 10 */
    --thirty-ten-spacing-v: 3rem 1rem;
    --thirty-ten-spacing-h: 1rem 3rem;

    /* 30 and 20 */
    --thirty-twenty-spacing-v: 3rem 2rem;
    --thirty-twenty-spacing-h: 3rem 2rem;

    /* breathe deeply */
    --breathe: clamp(2.5rem, 5vw + 1rem, 6rem);


/* ALIGN */
  --left: left;
  --center: center;
  --right: right;

/* WIDTH */
    
    /* 10w */
    --ten-width: 10vw;
    
    /* 20w */
    --twenty-width: 20vw;

    /* 30w */
    --thirty-width: 30vw;

  /* 40w */
  --forty-width: 40vw;

  /* 50w */
  --fifty-width: 50vw;

  /* 60w */
  --sixty-width: 60vw;

  /* 70w */
  --seventy-width: 70vw;

  /* 80w */
  --eighty-width: 80vw;

  /* 90w */
  --ninety-width: 90vw;

  /* full width */
  --full: 100%;
    
/*  TYPEFACES */
  --small-size: 1rem;

  --normal-size: 1.2rem;
  --medium-normal-size: 2.4rem;
  --medium-size: 3rem;
  --large-size: 3.5rem;
  
  --hero-large-size: 7.2rem;
  --huge-size: clamp(.75rem, 6vw + 4rem, 12rem);

/* BUTTON */
    
}