:root {
  /* Color Variables */
  --main-color: 25, 25, 25;
  --grey: 75, 75, 75;
  --light-grey: 125, 125, 125;
  --signal-color: 227, 6, 19;
  --white: 255, 255, 255;
  --cta: 25, 129, 219;

  --text-standard-color: rgba(var(--main-color)1.0);
  --text-signal-color: rgba(var(--signal-color)1.0);

  /* Text Variables */
  --hero-text: "hero-text", system-ui, sans-serif;
  --navigation-text: "navigation-text", system-ui, sans-serif;
  --heading-text: "heading-text", system-ui, sans-serif;
  --text-light: "text-light", system-ui, sans-serif;
  --text-regular: "text-regular", system-ui, sans-serif;
  --text-bold: "text-bold", system-ui, sans-serif;

  /* Border Variables */
  --grid-white: 1px solid rgba(255, 255, 255, 0.5);

  --radius-small: 6px;
  --radius-medium: 10px;
}



/* General */
html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--text-regular) !important;
  color: var(--text-standard-color);
  font-size: 1rem;
  scroll-padding-top: 150px;
}

ul,
li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

hr {
  margin: 3rem 0 !important;
  border-top: 1px solid rgba(var(--white), 0.9) !important;
}

a {
  text-decoration: none;
  /* color: var(--text-standard-color) !important; */
}

a:hover {
  color: rgba(var(--signal-color), 1.0) !important;
}

* {
  transition: color 0.3s ease-in-out;
}

.text-white {
  color: rgba(var(--white), 1.0) !important;
}

.text-dark {
  color: rgba(var(--main-color), 1.0) !important;
}

/* Components */
.btn-dark {
  background-color: rgba(var(--main-color), 1.0) !important;
}

.btn-dark:hover {
  background-color: rgba(var(--grey), 1.0) !important;
}

.btn {
  transition: background-color 0.3s ease-in-out !important;
}

.bg-main-color {
  background-color: rgba(var(--main-color), 1.0) !important;
}

.bg-light-grey {
  background-color: rgba(var(--light-grey), 1.0) !important;
}

.bg-light-grey-50 {
  background-color: rgba(var(--light-grey), 0.5) !important;
}

.bg-light-grey-25 {
  background-color: rgba(var(--light-grey), 0.25) !important;
}

.bg-light-grey-15 {
  background-color: rgba(var(--light-grey), 0.15) !important;
}

.bg-light-grey-10 {
  background-color: rgba(var(--light-grey), 0.1) !important;
}

.bg-white {
  background-color: rgba(var(--white), 1.0) !important;
}

/* Border Radius */
.rounded-small {
  border-radius: var(--radius-small) !important;
}

.rounded-medium {
  border-radius: var(--radius-medium) !important;
}