<section class="marquees-wrapper">
  <div class="marquee marquee-1">
    <ul class="marquee__content scroll">
      <li>police line do not cross</li>
      <li>&#183;</li>
      <li>crime scene do not cross</li>
      <li>&#183;</li>
      <li>police line do not cross</li>
      <li>&#183;</li>
      <li>crime scene do not cross</li>
      <li>&#183;</li>
      <li>police line do not cross</li>
      <li>&#183;</li>
      <li>crime scene do not cross</li>
      <li>&#183;</li>
    </ul>
    <!-- Mirrors the content above -->
    <ul class="marquee__content scroll" aria-hidden="true">
      <li>police line do not cross</li>
      <li>&#183;</li>
      <li>crime scene do not cross</li>
      <li>&#183;</li>
      <li>police line do not cross</li>
      <li>&#183;</li>
      <li>crime scene do not cross</li>
      <li>&#183;</li>
      <li>police line do not cross</li>
      <li>&#183;</li>
      <li>crime scene do not cross</li>
      <li>&#183;</li>
    </ul>
  </div>
  <div class="marquee marquee-2">
    <ul class="marquee__content scroll">
      <li>police line do not cross</li>
      <li>&#183;</li>
      <li>crime scene do not cross</li>
      <li>&#183;</li>
      <li>police line do not cross</li>
      <li>&#183;</li>
      <li>crime scene do not cross</li>
      <li>&#183;</li>
      <li>police line do not cross</li>
      <li>&#183;</li>
      <li>crime scene do not cross</li>
      <li>&#183;</li>
    </ul>
    <!-- Mirrors the content above -->
    <ul class="marquee__content scroll" aria-hidden="true">
      <li>police line do not cross</li>
      <li>&#183;</li>
      <li>crime scene do not cross</li>
      <li>&#183;</li>
      <li>police line do not cross</li>
      <li>&#183;</li>
      <li>crime scene do not cross</li>
      <li>&#183;</li>
      <li>police line do not cross</li>
      <li>&#183;</li>
      <li>crime scene do not cross</li>
      <li>&#183;</li>
    </ul>
  </div>
  <div class="marquee marquee-3">
    <ul class="marquee__content scroll">
      <li>police line do not cross</li>
      <li>&#183;</li>
      <li>crime scene do not cross</li>
      <li>&#183;</li>
      <li>police line do not cross</li>
      <li>&#183;</li>
      <li>crime scene do not cross</li>
      <li>&#183;</li>
      <li>police line do not cross</li>
      <li>&#183;</li>
      <li>crime scene do not cross</li>
      <li>&#183;</li>
    </ul>
    <!-- Mirrors the content above -->
    <ul class="marquee__content scroll" aria-hidden="true">
      <li>police line do not cross</li>
      <li>&#183;</li>
      <li>crime scene do not cross</li>
      <li>&#183;</li>
      <li>police line do not cross</li>
      <li>&#183;</li>
      <li>crime scene do not cross</li>
      <li>&#183;</li>
      <li>police line do not cross</li>
      <li>&#183;</li>
      <li>crime scene do not cross</li>
      <li>&#183;</li>
    </ul>
  </div>
</section>

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
}
.marquees-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  background-image: url("https://images.unsplash.com/photo-1539397810181-d80bea4ea42d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzYxOTg1NjA&ixlib=rb-4.0.3&q=80");
  background-repeat: no-repeat;
  background-size: cover;
  overflow-x: hidden;
}
.marquees-wrapper::after {
  position: absolute;
  content: "";
  inset: 0;
  box-shadow: inset 0px 0px 100px 70px rgba(0, 0, 0, 1);
}

.marquee {
  --gap: 1rem;
  margin-block: 10px;
  display: flex;
  gap: var(--gap);
  background: #f5f521;
  box-shadow: 0px 24px 17px 0px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  user-select: none;
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: var(--gap);
}
.scroll {
  animation: scroll 30s linear infinite;
}
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

/* styling design*/
.marquee__content li {
  list-style: none;
  line-height: normal;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-size: 2rem;
}
.marquee-1 {
  position: absolute;
  top: 50%;
  rotate: 7deg;
}
.marquee-1 .scroll {
  animation: scroll 20s linear infinite;
}

.marquee-2 {
  position: absolute;
  top: 25%;
  rotate: 10deg;
}
.marquee-2 .scroll {
  animation: scroll 25s linear infinite reverse;
}
.marquee-3 {
  position: absolute;
  top: 50%;
  rotate: -10deg;
}