@import './IndexStyle.css';

.thanks-container{
    max-width: 2600px;
    width: 100%;
}

.thanks-text{
  text-align: center;
    margin: 0 auto;
    width: fit-content;
}

.thanks-text h2 {
  font-family: monospace;
  color: var(--secondary-color);
  font-size: var(--margin-xxl);
  font-size: clamp(var(--margin-l), 2vw, var(--margin-xxl));
  overflow: hidden;
  white-space: nowrap;
  width: 0;
}

.thanks-text h2.in-view {
  animation: mono-typing 3.5s steps(27, end) forwards, blink-caret 0.75s step-end infinite;
  animation-fill-mode: forwards;
  animation-delay: 0s, 4s;
  border-right: 2px solid whitesmoke;
}


  
  /* Typing animation */
  @keyframes mono-typing {
    from { width: 0; }
    to { width: 100%; }
  }
  
  /* Blinking cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: transparent; }
  }

  @media screen and (max-width: 800px){
    .thanks-text h2 {
        font-family: monospace;
        color: var(--secondary-color);
        font-size: var(--margin-xxl);
        font-size: clamp(var(--margin-l), 3.5vw,var(--margin-xl));
    }    
  }