:root {
  --cartos-bright-green: #2dad77;
  --cartos-dark-green: #15553a;
  --cartos-darker-green: #062719;
  --cartos-dark-gold: #bf3f1a;
  --cartos-bright-gold: #fbb07a;

  --collab-light: var(--cartos-bright-gold);
  --collab-dark: var(--cartos-dark-gold);
  --collab-gradient: -webkit-linear-gradient(var(--cartos-bright-gold), var(--cartos-dark-gold));
  --collab-gradient-green-soft: -webkit-radial-gradient(circle, var(--cartos-bright-green) 0%, var(--cartos-dark-green) 70%);
  --collab-gradient-green-sharp: -webkit-radial-gradient(circle, var(--cartos-darker-green) 0%,  var(--cartos-dark-green) 70%, var(--cartos-bright-green) 99%);
}

#landing-hero-transport-location {
  background: var(--collab-gradient-green-soft);
  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-background {
    background: var(--collab-gradient-green-sharp);
}

.collab-plain-color{
    color: var(--collab-light);
}

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