/* 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;
}

.clickable-image:hover {
  cursor: pointer, auto;
}

#gallery-text{
    display:table;
}

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

#gallery-text-left > #gallery-text-right{
 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 */
    }
}
    
.scroll-containerr {
    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-wrapperr {
    display: inline-block; /* Allows the animation to work correctly */
    animation: autoScrollr 20s linear infinite; /* Apply the animation */
}

.image-wrapperr 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 autoScrollr {
    0% {
        transform: translateX(-100%); /* Start position: no horizontal movement */
    }
    100% {
        transform: translateX(530%); /* End position: moves the width of the container to the left */
    }



}