@font-face {
  font-family: 'Sora';
  src: url('./fonts/Sora-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('./fonts/Sora-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('./fonts/Sora-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('./fonts/Sora-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('./fonts/Sora-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand-text:         #E2E3E4; /* highlighted/prominent text */
  --brand-text-regular: #E2E3E4;
  --brand-purple: #8C44D4;
  --brand-red:    #D42A44;
  --brand-blue:   #466EC3; 

  --brand-purple-rgb: 140, 68, 212;
  --brand-red-rgb:    212, 42, 68;
  --brand-blue-rgb:   70, 110, 195;
  --brand-text-rgb:   226, 227, 228;
}

html, body {
  font-family: 'Sora', sans-serif;
  font-weight: 400; /* Sora Regular */
  color: var(--brand-text);
  background-color: #252525;
}

strong, b,
h1, h2, h3, h4, h5, h6,
.font-bold {
  font-family: 'Sora', sans-serif;
  font-weight: 700; /* Sora Bold */
}

.site-nav,
nav.topnav,
footer {
  font-weight: 700;
}

.text-white,
.text-gray-400,
.text-brand {
  color: var(--brand-text) !important;
}