body {
  background-image: url("foun.png");
  background-repeat: repeat;
  background-size: 600px;
  background-position: 150px 150px;
  overflow: hidden; /* Prevent scrolling */
  position: relative;
}

.animated-text {
  position: absolute;
  font-size: 32px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  white-space: nowrap; /* Prevent text wrapping */
  animation: roll 15s linear infinite; /* Animation setup */
  --base-rotation: -15deg; /* CSS variable for base rotation */
}

@keyframes roll {
  0% {
    transform: translateX(-50vw) rotate(calc(var(--base-rotation) - 0deg)); /* Start off-screen */
  }
  25% {
    transform: translateX(12.5vw) rotate(calc(var(--base-rotation) + 30deg)); /* Wobble to positive */
  }
  50% {
    transform: translateX(75vw) rotate(calc(var(--base-rotation) + 0deg)); /* Wobble back to base */
  }
  75% {
    transform: translateX(137.5vw) rotate(calc(var(--base-rotation) + 30deg)); /* Wobble to positive again */
  }
  100% {
    transform: translateX(200vw) rotate(calc(var(--base-rotation) + 0deg)); /* End off-screen */
  }
}