:root {
    --darkBgColour: #333;
    --darkFgColour: #fff;
    --lightBgColour: #fff;
    --lightFgColour: #000;
 
    --headerHeight: 80px;
    --filterPanelWidth: 300px;
}

:root {
  /* Colours */
  --colour1: #300a28; --colour2: #630a4f; --colour3: #960a76; --colour4: #c90a9d; --colour5: #fc0ac4;
  --grey0: #000; --grey1: #111; --grey2: #222; --grey3: #333; --greyD: #ddd; --greyF: #fff;
}

.bgColour1 {background-color: var(--colour1);}
.bgColour2 {background-color: var(--colour2);}
.bgColour3 {background-color: var(--colour3);}
.bgColour4 {background-color: var(--colour4);}
.bgColour5 {background-color: var(--colour5);}

.bgColour12 {background-color: var(--grey1);}
.bgColour00 {background-color: var(--grey0);}
.bgColourFF {background-color: var(--greyF);}
.bgColourDD {background-color: var(--greyD);}

.fgColourFF {color: var(--greyF);}
.fgColour33 {color: var(--grey3);}

.bgColourRed {background-color: #c84357;}
.bgColourGold {background-color: #cc7200;}

.fgColourRed {color: #c84357;}
.fgColourGold {color: #cc7200;}

:root {

  /* Sizes */
  --iconSize: 30px;

  
  --headerGap: 24px;

  --portraitAspect: 4/3;
  
  --rootSize: 16px;

  --h1Multiplier: 2;
  --h2Multiplier: 1.7;
  --h3Multiplier: 1.4;
  --pMultiplier: 1.1;
  
  
  --textMultiplier2: 0.8;
  --textMultiplier3: 0.9;
  --textMultiplier4: 1;
  --textMultiplier5: 1;

  --sideNavPadding: 30px;

  --headesrHeight: 85px;

  --genericGap: 16px;
   
}