:root {
  --black: #000000;
  --black-0: rgba(0,0,0,0);
  --black-50: rgba(0,0,0,0.5);
  --grey: #c4c4c4;
  --grey-0: rgba(196,196,196,0);
  --grey-50: rgba(196,196,196,0.5);
  --white: #ffffff;
  --white-0: rgba(255,255,255,0);
  --white-50: rgba(255,255,255,0.5);
  --brand: #da291c;
  --brand-0: rgba(218,41,28,0);
  --brand-50: rgba(218,41,28,0.5);
  --lighter: #ff3526;
  --lighter-0: rgba(255,53,38,0);
  --lighter-50: rgba(255,53,38,0.5);
  --darker: #ad2016;
  --darker-0: rgba(173,32,22,0);
  --darker-50: rgba(173,32,22,0.5);
  --background: #f2f6f7;
  --background-0: rgba(242,246,247,0);
  --background-50: rgba(242,246,247,0.5);
  --font-family-title: 'Lexend';
  --font-family-text: 'Lexend';
}

h1,h2,h3,h4,h5,h6 { font-family: var(--font-family-title); }
body,p,span,a { font-family: var(--font-family-text); }

@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}