/* Root */
:root {
  /* Colors */
  --primary: #0FF;
  --primary-rgb: 0, 255, 255; 
}

/* Gradient Text */
.gradient-text {
  background: -webkit-linear-gradient(0deg, var(--primary), rgba(var(--primary-rgb), 0.25) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(var(--primary-rgb), 0.75);
}

/* Stroke-text */
.stroke-text {
  text-transform: uppercase;
  font-weight: bolder;
  background: -webkit-linear-gradient( var(--primary), rgba(var(--primary-rgb), 0) 50%);
  -webkit-background-clip: text;
  -webkit-text-stroke: 1px var(--primary);
  -webkit-text-fill-color: transparent;
  writing-mode: vertical-lr;
}

/* Navbar Brand */
.navbar-brand {
  --bs-navbar-brand-color: rgba(var(--primary-rgb), 0.75);
  --bs-navbar-brand-hover-color: var(--primary);
  font-family: MajorMonoDisplay;
  transition: color 200ms linear;
}

/* Nav Tabs */
.nav-tabs {
  --bs-nav-tabs-border-color: var(--primary);
  --bs-nav-tabs-border-radius: var(--bs-border-radius-lg);
  --bs-nav-tabs-link-hover-border-color: rgba(var(--primary-rgb), 0.75) rgba(var(--primary-rgb), 0.75) transparent;
  --bs-nav-tabs-link-active-border-color: var(--primary) var(--primary) transparent;
}

/* Nav Link */
.nav-link {
  --bs-nav-link-color: rgba(var(--primary-rgb), 0.75);
  --bs-nav-link-hover-color: var(--primary);
  transition: color 200ms linear;
}