:root {
/* COLOURS */
--primaryColorL: rgb(230,225,218);
--primaryColorD: rgb(35,30,33);
--primaryColorM: rgba(35,30,33,.6);

  /*  main */
  --primaryPurpleColor: rgb(76,32,68);
  --secondaryPurpleColor: rgb(106,38,89); 
  
  --primaryYellowColor:  rgba(255, 180, 0, 1);
  --primaryYellowColorTint:  rgba(255, 180, 0, .25);
  --primaryYellowColorC:  rgba(255, 180, 0, .2);
  --accentColor: rgba(166,0,0,.6);
  
  --hoverColor: rgba(205, 110, 40, .2);
    --hoverColorCard: rgb(205, 110, 40);


/* SPACING */

/* 1x */
--fiveSpacing: .5rem;

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

/* 1x */
--tenSpacing: 1rem;

    /* 1  and 0 */
    --tenSpacing-v: 1rem 0;
    --tenSpacing-h: 0 1rem;

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

    /* 2x and 1x */
    --twentyTenSpacing-v: 2rem 1rem;
    --twentyTenSpacing-h: 1rem 2rem;

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

    /* 30 and 10 */
    --thirtyTenSpacing-v: 3rem 1rem;
    --thirtyTenSpacing-h: 1rem 3rem;

    /* 30 and 20 */
    --thirtyTwentySpacing-v: 3rem 2rem;
    --thirtyTwentySpacingH: 3rem 2rem;

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


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

/* WIDTH */
    
    /* 10w */
    --tenWidth: 10vw;
    
    /* 20w */
    --twentyWidth: 20vw;

    /* 30w */
    --thirtyWidth: 30vw;

  /* 40w */
  --fortyWidth: 40vw;

  /* 50w */
  --fiftyWidth: 50vw;

  /* 60w */
  --sixtyWidth: 60vw;

  /* 70w */
  --zeventyigWidth: 70vw;

  /* 80w */
  --eightyWidth: 80vw;

  /* 90w */
  --ninetyWidth: 90vw;

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

  --normalSize: 1.3rem;
  --mediumNormalSize: 2.4rem;
  --mediumSize: 3rem;
  --largeSize: 3.5rem;
  
  --heroLargeSize: 7.2rem;
  --hugeSize: clamp(5em, 2vw + 10rem, 40rem);

/* BUTTON */
    
}