<div class='container'>
  <div class='marquee'>
    <p>
      <span class='marquee-text'>Hey, I  am Kama.</span>
    </p>
  </div>
  
  <div class='marquee'>
    <p>
      <span class='marquee-text'>Nice to meet you</span>
    </p>
  </div>
  
  <div class='marquee'>
    <p>
      <span class='marquee-text'>Mewo Mewo</span>
    </p>
  </div>
</div>

$font-stack: 'Raleway', Arial, sans-serif
$black-color: darken(#2C303A, 5%)
$white-color: white


/* Mixin */
@mixin d-flex-c($rc: unset, $jc: center, $ai: center)
  display: flex
  flex-direction: $rc
  justify-content: $jc
  align-items: $ai
@mixin size($w, $h: $w)
  width: $w
  height: $h
@mixin keyframes($animationName)
  @keyframes #{$animationName}
    @content
  @-o-keyframes #{$animationName}
    @content
  @-moz-keyframes #{$animationName}
    @content
  @-webkit-keyframes #{$animationName}
    @content
@mixin animation($animation)
  animation: $animation
  -webkit-animation: $animation
/*********/

.marquee
  @include size(400px, 60px)
  position: relative
  overflow: hidden
  margin: 12px 0
  font-weight: 700
  font-size: 24px
  line-height: 60px
  color: #FFFFFF
  background-color: #ECB945
  border-radius: 20px
  &:nth-of-type(2)
    background-color: #55BEC9
  &:nth-of-type(3)
    background-color: #6ED1A8
.marquee p
  @include animation(marquee 5s linear infinite)
  position: absolute
  width: 200%
  span
    float: left
    width: 50%
 
@include keyframes(marquee)
  0%
    right: 0
  100%
    right: -100%
  
/* Base */
*, *::before, *::after
  box-sizing: border-box
  margin: 0

body
  @include d-flex-c(column)
  font-family: $font-stack
  color: $white-color
  background-color: $black-color
  min-height: 95vh
  cursor: default
.container
  display: inline-block
  position: relative

if (document.getElementsByClassName('marquee')[0]) {
  document.querySelectorAll('.marquee').forEach(item => {
    const word = document.createElement('span');
    word.classList.add('marquee-text');
    word.innerHTML = item.children[0].children[0].innerHTML;
    item.children[0].appendChild(word);
  });
};

// my discard planb
    // if (document.getElementsByClassName('marquee')[0]) {
    //     document.querySelectorAll('.marquee').forEach(item => {
    //         item.style.height = `${item.children[0].offsetHeight}px`;
    //         item.style.width = `${item.children[0].offsetWidth}px`;
    //         item.children[0].children[0].style.margin = `0 ${item.children[0].offsetWidth}px 0 0 `
    //     });
        
    //     // let rtl = document.getElementsByClassName('marquee')[0].children[0].offsetWidth;
    //     // document.documentElement.style.setProperty('--rtl', `-${rtl}px`);
    //     // console.log(rtl);
    // };