:root { 
    --slow-duration: 9s;
    --underline-color: #007bff; /* change color here */
    --underline-height: 2px;    /* line thickness */
    --underline-duration: 6s;   /* animation speed */
 }

.logo {
    max-width:200px;
}

.throbber {
    animation: throb 2s infinite;
}


@keyframes throb {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}



@media (prefers-reduced-motion: reduce) {
  .slow-type { animation: none; -webkit-mask-image: none; opacity: 1; }
}

.slow-type {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  /* mask to create a reveal effect */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
  animation: slowType var(--slow-duration) steps(60, end) infinite;
}

@keyframes slowType {
  0%   { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; opacity: 0.2; }
  20%  { opacity: 1; }
  50%  { -webkit-mask-position: 100% 0%; mask-position: 100% 0%; }
  80%  { opacity: 1; }
  100% { opacity: 0.2; -webkit-mask-position: 200% 0%; mask-position: 200% 0%; }
}



/* container */
.animated-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 4px; /* spacing between text and line */
  overflow: hidden;
}

/* the moving line */
.animated-underline::after {
  content: "";
  position: absolute;
  left: -100%;             /* start off-screen */
  bottom: 0;
  width: 100%;
  height: var(--underline-height);
  background-color: var(--underline-color);
  animation: underlineMove var(--underline-duration) ease-in-out infinite;
}

/* animation keyframes */
@keyframes underlineMove {
  0% {
    left: -100%;
  }
  50% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

/* accessible: disable animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animated-underline::after {
    animation: none;
    left: 0;
  }
}