* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  margin-left: 0 !important; 
  padding-left: 0!important; 

}

.gallery-wrapper{
  outline: 1px solid #fff;
}


body, html {
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  background: #fff;
  color: #000;
  overflow-x: hidden;
  overflow-y: hidden;


}

a {
  color: inherit;/* removes the underline f*/
  text-decoration: none;/* removes the underline from links. */
}

.gallery-wrapper {
    
  position: fixed;
  
  top: 0; /* FIX THE GALLERY ON TOP */
  left: 0;
    
    
  width: 100vw;
  height: 100vh;  /* max height is viewport height */
 
  overflow-x: auto;/* keep scrolling */
  overflow-y: hidden; /* no vertical scroll */

   display: flex;
  justify-content: center;
  align-items: center;
 
    margin: 0;
  padding: 0;           /* optional side padding */  
 
    gap: 40px; /* equal spacing between images */
}

.gallery-wrapper img {
    
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

img {
  max-height: 100vh;           /* sets height based on viewport */
  width: auto;            /* maintain aspect ratio */
  max-width: 100%;        /* prevent overflow in container */
  object-fit: contain;    /* no cropping */
  display: block;
}


.dynamic-title {
  position: fixed;
  top: 50%;
  left: 50%;               /* moved from 20px to 40% for better centering */
  transform: translate(-50%, -50%);
  z-index: 1000;
  color: white;
  mix-blend-mode: difference;
  font-size: clamp(32px, 6vw, 130px);
  pointer-events: auto; /* ensure it's clickable */
}

.scrolling-gallery {
  display: flex;
  align-items: center;
  gap: 40px; /* uniform spacing between images */
  animation: scroll 100s linear infinite;
}


.scrolling-gallery img {
 
  display: block;  /* block removes inline spacing issues */
  height: 100vh;            /* or use max-height: 80vh; */
  width: auto;         /* prevent images from being wider than screen */
  vertical-align: unset; /* or remove this property */
  object-fit: contain;
}


@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-75%); }
    
}

@media (max-width: 600px) {
  .scrolling-gallery img {
    height: 50vh;  /* fixed same height */
    width: 50vw;   /* auto width to keep aspect ratio */
    outline: none; /* remove any borders */
  }
}