: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;
    --red: 227, 6, 19;
    --green: 0, 128, 0;

    --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);
}

/* General */
html,
body {
    margin: 0;
    padding: 0;
    font-family: var(--text-regular) !important;
    color: rgb(var(--white));
    font-size: 16px;
    background-color: rgba(var(--grey), 1.0);
}

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

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

.navbar { font-family: var(--navigation-text);}

.card-title {
    font-family: var(--text-bold) !important;
    /* font-size: 1.5rem; */
    font-size: calc(15px + 0.390625vw);
}

.hero {
  font-family: var(--hero-text) !important;
  font-size: clamp(2rem, -0.5rem + 8.333vw, 3.5rem);
}

.heading {
  font-family: var(--heading-text) !important;
  font-size: 2rem;
}

h5 {
  font-family: var(--heading-text) !important;
  font-size: 1.5rem;
}


strong, b, th {
  font-family: var(--text-bold) !important;
}

.fw-bold {
  font-family: var(--text-bold) !important;
}
/* * {
    transition: color 0.3s ease-in-out;
  } */

/* Components */
.btn-dark {
  background-color: rgba(var(--grey), 1.0) !important;
  border: rgb(var(--light-grey)) 2px solid;
}

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

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


::placeholder {
  color: rgba(var(--light-grey),0.9) !important;
}

.badge {
  font-size: 0.9em !important;
}