body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* Hide scrollbars */
}

.background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://res.cloudinary.com/dbpmxkrgz/image/upload/q_48/v1686397192/Sanaa's%20World/WadiRum_rocks_xnmn7v.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: fixed;
  overflow-x: hidden; /* Prevent horizontal scrolling */
  overflow-y: scroll; /* Enable vertical scrolling */
}

.Links {
  position: fixed;
  margin-top:0;
  color:#FFF9E3;
  font-family: Garamond, serif;
  font-size: 25px;
  font-weight: 500;
  margin-right: 20px;
  margin-left: 10px;
  text-decoration-line: none;
  text-size-adjust: auto;
}

.Links a {
  color: #FFF9E3;
  text-decoration: none;
}

.Links a:hover {
  text-decoration: none;
}

.split-container{
  display: flex;
  height: 100%;
  overflow-x: scroll;
}

#ProjectList {
  background-color: #3c7089;
  position: fixed;
   right: 0%;
   bottom: 0%;
   width: 50%;
   height: 100%;
   overflow: scroll;
   margin: 0 auto;
   text-align: start;
   opacity: 90%;
}


.project {
  margin-bottom: 50%;
  margin-left: 10%;
  font-family: Garamond, serif;
}

.project h1 {
  font-size: 10vh;
  color:#FFF9E3;
  font-family: Garamond, serif;
  margin-right: 10%;
  
}

.project h4{
  color: #FFF9E3;
  margin-right: 10%;
  font-size: 2.5vh;
}

.project p {
  font-size: 2.5vh;
  color: #fff9e3;
  margin-right: 10%;
}

.project h3{
  font-size:3vh ;
  color: #FFF9E3;
  text-decoration: dotted;
  margin-right: 10%;
}

#ProjectImages {
  display: flex;
  flex-direction: row;
  align-items: center; /* Center images horizontally */
  justify-content: flex-start; /* Start from the left */
  overflow-x: scroll; /* Enable horizontal scrolling */
  overflow-y: hidden; /* Disable vertical scrolling */
  white-space: nowrap; /* Prevent images from wrapping to the next line */
  width: 100%;
}

.image-container {
  scroll-snap-align: ;
  flex: 0 0 auto; 
}

#ProjectImages img {
  width: 80vh; /* Maintain the original width */
  height: 80vh; /* Adjust the height as needed, leaving padding at the top and bottom */
  object-fit: contain; /* Maintain aspect ratio and fit within the container */
  margin-right: 10vh;
  padding: 10px;
}

.scroll-container {
  scroll-snap-type: both mandatory;
}

#ProjectList, #ProjectImages {
  flex: 1;
  scroll-snap-type: x mandatory;
}

.empty-container {
 
}

a:link { 
  text-decoration: underline; 
  color: #FFF9E3;
} 
a:visited { 
  text-decoration: underline; 
  color: #FFF9E3;
} 
a:hover { 
  text-decoration: underline; 
  color: #FFF9E3;
} 
a:active { 
  text-decoration: underline; 
  color: #FFF9E3;
}