:root {
  --bloodwood-orange: #d1a02a;
  --bloodwood-red: #8f3a21;
  --bloodwood-gradient: -webkit-linear-gradient(#d1a02a, #8f3a21);
}

#landing-hero-transport-location-bloodwood {
  background: -webkit-linear-gradient(#d1a02a, #8f3a21);
  background-clip: text;
  fill: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* -webkit-text-stroke: 1px var(--bardic-dark); */
}

.bloodwood-colors {
  --bardic-light: var(--bloodwood-orange);
  --bardic-dark: var(--bloodwood-red);
  background: var(--bloodwood-gradient);
}
.bloodwood-icon {
  svg {
    color: var(--bloodwood-red);
    stroke: var(--bloodwood-red);
    /* fill: var(--bloodwood-gradient); */
  }
}

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

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

.bloodwood-box-shadow {
  box-shadow: 0px 0px 10px var(--bloodwood-red);
}

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

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

.landing-title {
  color: var(--bloodwood-red);
  background: var(--bloodwood-gradient);
  background-clip: text;
  fill: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-title-underline {
  svg {
    color: var(--bloodwood-red);
    stroke: var(--bloodwood-red);
    /* fill: var(--bloodwood-gradient); */
  } 
}