/* 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 {
   background-image: url("sunsrisestreet.jpg") ;
  background-color: white;
  color: black;
  font-family: Verdana;
}

p {
  line-height: 20px;   /* within paragraph */
  margin-bottom: -10px; /* between paragraphs */
  }

#gallery-text{
    display:table;
}

#gallery-text-left, #gallery-text-right{
    display:table-row;
}

#gallery-text-left > p,
#gallery-text-right > p{
 display:table-cell ;
}

.scroll-container {
    width: 100%; /* The visible area of the scroller */
    overflow: hidden; /* Hides the images when they are outside the container */
    white-space: nowrap; /* Ensures images stay in a single line */
}

.image-wrapper {
    display: inline-block; /* Allows the animation to work correctly */
    animation: autoScroll 20s linear infinite; /* Apply the animation */
}

.image-wrapper img {
    height: 150px; /* Set a consistent height for images */
    margin-right: 10px; /* Space between images */
    display: inline-block; /* Aligns images horizontally */
}

/* Keyframe animation definition */
@keyframes autoScroll {
    0% {
        transform: translateX(530%); /* Start position: no horizontal movement */
    }
    100% {
        transform: translateX(-100%); /* End position: moves the width of the container to the left */
    }



}