:root {
    --title-font-size: clamp(1.5rem, 6vw, 3rem);
    --subtitle-font-size: clamp(1rem, 2vw, 1.2rem);
  }
  
  h1 {
    text-align: center;
    font-size: var(--title-font-size);
    display: block;
  }
  
  h2 {
    text-align: center;
    font-size: 2rem;
    display: block;
  }
  
  #duplicate-button {
    display: block;
    margin: 1rem auto;
    color: #fff;
    background: #800eb1;
    border-radius: 100vh;
    padding: 0.5rem 1rem;
  }
  
  #component-0 {
    max-width: 85%;
    margin: 2rem auto;
    padding: 2rem;
  }
  
  @media (max-width: 600px) {
    #component-0 {
      max-width: 100%;
      padding: 0.5rem;
    }
  }
  
  #title-container {
    text-align: center;
    padding: 2rem 0;
  }
  
  #title {
    font-size: var(--title-font-size);
    color: #333;
    font-family: 'Helvetica Neue', sans-serif;
    text-transform: uppercase;
    background: transparent;
  }
  
  #title span {
    background: linear-gradient(45deg, #f30abd, #28b485);
    background-clip: text;
    color: transparent;
  }
  
  #subtitle {
    text-align: center;
    font-size: var(--subtitle-font-size);
    margin-top: 1rem;
  }