/* 
  These are style configurations for the homepage.
  Specifically, these configs deal with the appearance and behavior of the typing effect:
    "Enabled Data Union is..."
*/

  /* Typing cursor effect */
  .typing-cursor {
    display: inline-block;
    background-color: currentColor;
    width: 3px;
    height: 0.85em;
    margin-left: 2px;
    opacity: 90%;
    animation: blink 1s infinite;
    transform: translateY(-0.2em);
  }
  @keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
  }
  
  /* Configurations for the rotating words */
  .rotator { display: inline-flex; align-items: baseline; min-width: 13ch; }
  #rotatingWord { display: inline-block; }
  .typing-cursor {
    display: inline-block;
    width: 0;                            
    height: 1em;
    border-right: 0.08em solid currentColor;
    margin-left: 0;
    animation: blink 0.8s steps(2, start) infinite;
    transform: translateY(2px);
  }

  /* Settings for mobile devices so everything scales nicely */
  @media (max-width: 600px) { 
    .rotator {
      display: block;
    }
    .hero-text {
      font-size: clamp(1rem, 6vw, 2rem);
    }
    .typing-cursor {
      margin-left: -1;
    }
  }