@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Inter:wght@400;700&display=swap");

:root {
  /* crg accents */
  --primary: #007990;
  --orange-crg: #fa961e;
  --teal-crg: #00a1c0;
  --green-crg: #0bac43;
  --red-crg: #b91e32;
  --yellow-crg: #fdda64;
  --dark-blue-crg: #005379;
  --clear-teal-crg: rgba(0, 161, 192, 0.2);
  --clear-red-crg: rgba(185, 30, 50, 0.2);
  --clear-orange-crg: rgba(250, 150, 30, 0.2);
  --clear-green-crg: rgba(11, 172, 67, 0.2);
  --muted: #222222;
  --color-1: #0bac43; /* green */
  --color-2: #7ac142; /* yellow-green */
  --color-3: #fa961e; /* orange */
  --color-4: #e55c2b; /* reddish-orange */
  --color-5: #b91e32; /* red */
  --text-light: #fff;
  --text-dark: #111;
  --font-size-root: 18px;
}

body {
  font-family:
    "Roboto",
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

h1 {
  font-weight: 700;
}

h2 {
  font-weight: 600;
}

h1,
h2 {
  letter-spacing: -0.02em;
}

.icon {
  font-size: 22px;
  line-height: 1;
  vertical-align: middle;
}
.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

a {
  text-decoration: none;
  color: var(--primary);
}

a:hover {
  color: var(--green-crg);
}

.navbar a {
  color: var(--primary) !important;
}

.navbar a:hover {
  color: var(--green-crg) !important;
}

.subtitle.lead {
  color: #343a40 !important;
  font-weight: bold;
}