:root {
  --bg-color-hsl: 59, 3%, 94%;
  --bg-color: hsl(var(--bg-color-hsl));
  --bg-color-translucent: hsla(var(--bg-color-hsl), 0.95);
  --bg-color-highlight: hsl(60, 90%, 50%);
  --color-text: hsl(192, 14%, 20%);
  --color-text-highlight: hsl(192, 14%, 0%);
  --page-width: 80ch;
  --paragraph-font-size: min(max(1.2rem, 4vw), 1.4rem);
  --header-font-size: min(max(2rem, 8vw), 4rem);
  --space: 2rem;
  --padding: 8vmin;
  --duration: 1s;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
}


.highlight-scroll-effect {
  all: unset;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  -webkit-transition: color calc(var(--duration) / 4) var(--ease), background-color calc(var(--duration) / 4) var(--ease), background-size var(--duration) var(--ease);
  transition: color calc(var(--duration) / 4) var(--ease), background-color calc(var(--duration) / 4) var(--ease), background-size var(--duration) var(--ease);
  
}
.highlight-scroll-effect.highlight_scroll_active {
  color: var(--color-text-highlight);
  background-size: 100% 100%;
}
[data-highlight="background"] .highlight-scroll-effect {
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--bg-color-highlight)), to(var(--bg-color-highlight)));
  background-image: linear-gradient(var(--bg-color-highlight), var(--bg-color-highlight));
}
[data-highlight="half"] .highlight-scroll-effect {
  --line-size: 0.5em;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(var(--bg-color-highlight)));
  background-image: linear-gradient(transparent calc(100% - var(--line-size)), var(--bg-color-highlight) var(--line-size));
}
[data-highlight="underline"] .highlight-scroll-effect {
  --line-size: 0.15em;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(var(--color-text)));
  background-image: linear-gradient(transparent calc(100% - var(--line-size)), var(--color-text) var(--line-size));
}
.highlight-scroll-effect::before, .highlight-scroll-effect::after {
  position: absolute;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.highlight-scroll-effect::before {
  content: " [highlight start] ";
}
.highlight-scroll-effect::after {
  content: " [highlight end] ";
}