@keyframes pathAnimation {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

@keyframes pathAnimationChild {
  0% {
    opacity: 100%;
    user-select: all;
  }
  31.7% {
    transform: rotate(0deg);
    margin-left: 0%;
  }
  37.5% {
    transform: rotate(180deg);
  }
  63% {
    transform: rotate(180deg);
    margin-left: 0%;
  }
  69% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
    opacity: 100%;
    user-select: all;
  }
}

.path-conatiner {
  position: absolute;
  inset: 0;
  transform-origin: top left;
  transform: scale(calc(100vw / 1920px));
  width: 1920px;
  height: 518px;
  overflow: clip;
}

.letterContainer {
  position: absolute;
  top: 12%;
  left: 0;
  width: max-content;
  height: max-content;
  animation: pathAnimation 20s linear;
  offset-path: path(
    "M0 0.5H1650C1703.02 0.5 1736 43.4807 1736 96.5C1736 149.519 1703.02 192.5 1650 192.5H310C256.981 192.5 214 235.481 214 288.5C214 341.519 256.981 384.5 310 384.5L1920 384"
  );
  offset-anchor: 50% 50%;
  offset-rotate: 0deg;
  display: flex;
  justify-content: center;
}

.letterContainer p {
  margin: auto;
  grid-row: 3;
  font-size: max(3vw, 40px);
  font-weight: bold;
  width: max(4vw, 45px);
  text-align: center;
  color: #e7eeac;
  animation: pathAnimationChild 20s linear;
  user-select: none;
  opacity: 0%;
}

html > div[style] {
  display: none !important;
}