:root {
  --ukge-orange: #fcb238;

  --collab-light: var(--ukge-orange);
  --collab-dark: var(--ukge-orange);
  --collab-gradient: -webkit-linear-gradient(var(--ukge-orange), var(--ukge-orange));
}

#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-background {
    background: var(--bardic-dark);
}

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