/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   body {
  cursor: url('rosecursor.gif'), auto;
}




  
  /* The outer container that hides the overflowing content */
.marquee-container {
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden; /* Hides content outside the container width */
  white-space: nowrap; /* Prevents the text from wrapping to a new line */
  box-sizing: border-box;
  /* Add other styling like background, padding, height as needed */
  border: 1px solid gray;
  position: fixed; /* For positioning children */
  /* Optional: Add padding to create a "snap" buffer */
  padding: 10px;
  z-index: 1000;
}

/* The inner container that holds the content and is animated */
.marquee-content {
  display: inline-block;
  padding-left: 100%; /* Starts the content off-screen to the right */
  animation: marquee 15s linear infinite; /* Applies the animation */
}

/* Optional: Pause animation on hover */
.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

/* Define the animation movement */
@keyframes marquee {
  0% {
    transform: translateX(0); /* Start position (fully off-screen right) */
  }
  100% {
    transform: translateX(-100%); /* End position (fully off-screen left) */
  }
}