:root {
    --snowy-pink: #bb9199;
    --snowy-orange: #f3bb84;
    --snowy-grey: #545454;
    --snowy-cream: #ead9c9;

    --collab-light: var(--snowy-cream);
    --collab-dark: var(--snowy-grey);
    --collab-gradient: -webkit-linear-gradient(var(--snowy-cream), var(--snowy-pink));
    --collab-gradient-dark: -webkit-linear-gradient(var(--snowy-cream), var(--snowy-grey));
    /* --collab-gradient: -webkit-linear-gradient(var(--snowy-pink), var(--snowy-cream)); */
    /* --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);
    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-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;
}