:root {
  --vault-bright-green: #00c577;
  --vault-dark-green: #029d76;
  --vault-teal: #00f7f7;
  --vault-darkblue: #039292;
  --vault-darkgrey: #408471;

  --collab-light: var(--vault-teal);
  --collab-dark: var(--vault-darkgrey);
  --collab-gradient: -webkit-linear-gradient(var(--collab-light), var(--collab-dark));
}

#landing-hero-transport-location {
  background: var(--collab-gradient);
  background-clip: text;
  fill: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.collab-text {
  color: var(--collab-light);
  background: var(--collab-gradient);
  background-clip: text;
  fill: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.collab-colors {
  --bardic-light: var(--collab-light);
  --bardic-dark: var(--collab-dark);
  background: var(--collab-gradient);
}

.collab-outline {
  --pico-border-color: var(--collab-dark);
  border-image: var(--collab-gradient) 1;
  border-radius: 5px; /* this doesn't work */
  border-width: 4px;
  border-style: solid;
}

.collab-box-shadow {
  box-shadow: 0px 0px 10px var(--collab-dark);
}

.feature-container {
  transition: all .25s ease-in;

  &:hover {
    transform: scale(1.02);
    box-shadow: 0px 0px 10px var(--collab-dark);
  }
}

.landing-title {
  color: var(--collab-dark);
  background: var(--collab-gradient);
  background-clip: text;
  fill: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.landing-title-underline {
  svg {
    color: var(--collab-dark);
    stroke: var(--collab-dark);
  } 
}

.feature-title-underline {
  svg {
    color: var(--collab-dark);
    stroke: var(--collab-dark);
  } 
}
.feature-title {
  color: var(--collab-light);
  background: var(--collab-gradient);
  background-clip: text;
  fill: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}