:root {
  --homebg: #0f0f0f;
  --aboutbg: #232d3f;
  --projectsbg: #005b41;
  --contactbg: #008170;
}
.wrapper-scroll {
  width: 100%;
  margin-inline: auto;
  position: relative;
  height: 10vh;
  background-color: var(--aboutbg);
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    rgba(53, 112, 14, 0),
    rgb(0, 231, 96) 0%,
    rgb(0, 124, 17) 100%,
    rgba(27, 117, 17, 0)
  );
  display: flex;
  align-items: center;
}
@keyframes scrollLeft {
  to {
    left: -12.5rem;
  }
}
.item {
  width: 15.5rem;
  height: 8vh;
  position: absolute;
  left: max(calc(15.5rem * 8), 100%);
  animation-name: scrollLeft;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  color: gray;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.item1 {
  animation-delay: calc(30s / 13 * (13 - 1) * -1);
}
.item2 {
  animation-delay: calc(30s / 13 * (13 - 2) * -1);
}
.item3 {
  animation-delay: calc(30s / 13 * (13 - 3) * -1);
}
.item4 {
  animation-delay: calc(30s / 13 * (13 - 4) * -1);
}
.item5 {
  animation-delay: calc(30s / 13 * (13 - 5) * -1);
}
.item6 {
  animation-delay: calc(30s / 13 * (13 - 6) * -1);
}
.item7 {
  animation-delay: calc(30s / 13 * (13 - 7) * -1);
}
.item8 {
  animation-delay: calc(30s / 13 * (13 - 8) * -1);
}
.item9 {
  animation-delay: calc(30s / 13 * (13 - 9) * -1);
}
.item10 {
  animation-delay: calc(30s / 13 * (13 - 10) * -1);
}
.item11 {
  animation-delay: calc(30s / 13 * (13 - 11) * -1);
}
.item12 {
  animation-delay: calc(30s / 13 * (13 - 12) * -1);
}
.item13 {
  animation-delay: calc(30s / 13 * (13 - 13) * -1);
}

/* MEDIA SCREEN RESPONSIVENESS */
@media (max-width: 1026px) {
  .wrapper-scroll {
    height: 6vh;
    background-color: var(--aboutbg);
  }
}
@media (max-width: 500px) {
  .wrapper-scroll {
    height: 6vh;
    background-color: var(--aboutbg);
  }
}