.marquee *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #ffffff;
  }

  body {
    font-family: Arial, sans-serif;
    padding: 2rem;
    background-color: #f4f4f4;
  }

  .marquee-container {
    width: 100%;
    overflow: hidden;
    background-color: #000000;
    height: 50px;
    display: flex;
    align-items: center;
    position: relative;
    
  }

  .marquee-text {
    white-space: nowrap;
    display: inline-block;
    padding-left: 100%;
    animation: scroll-left var(--speed) linear infinite;
    cursor: pointer;
    
  }

  @keyframes scroll-left {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  /* Speed control via CSS variables */
  .speed-slow   { --speed: 50s; }
  .speed-medium { --speed: 8s; }
  .speed-fast   { --speed: 4s; }

  /* Optional styling */
  .marquee-text span {
    padding: 0 2rem;
    color: #ffffff;
    font-size: 1.2rem;
  }