* {
  font-family: 'Source Sans 3';
  text-decoration: none;
  color: rgb(0, 0, 0);
  scroll-behavior: smooth;
}

@media (orientation: landscape){
  #text-animation {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: 3vh;
    font-weight: 200;
    letter-spacing: 10px;
}
#image-container {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#image-container img {
  max-width: 5vw;
  max-height: auto;
  border-radius: 10px;
  z-index: 999;
}

h1{
  position: relative;
  margin-bottom: 3vh;
  font-size: 3vh;
  font-weight: 200;
  letter-spacing: 25.6px;
}

.container{
  padding-top: 20vh;
  padding-left: 10vw;
  width: 80vw;
}
.gallery-wrap {
  display: flex;
  flex-wrap: nowrap; /* Keeps items in a single line */
  width: 100%; /* Make sure the gallery stretches the full width */
  overflow: hidden;
}

.item {
  position: relative;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: flex 0.8s ease;
  padding-left: 0.5vw;
  padding-right: 0.5vw;
  overflow: visible;

  /* Allow items to grow and shrink based on their original width */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto; /* Adapts the base size according to each image's intrinsic width */
}

.item img {
  width: auto; /* Ensures the image retains its natural width */
  height: 100%; /* Adjust the height as per your layout */
  object-fit: cover; /* Adjust how the image scales */
}

/* Optional: enlarge on hover */
.item:hover {
  flex-grow: 2; /* This makes the hovered item expand slightly more */
}
  .container {
    padding-top: 20vh;
    padding-left: 10vw;
    width: 80vw;
    height: 50vh;
  }

  .gallery-wrap {
    display: flex;
    flex-direction: row;
    width: 80vw;
    height: 40vh;
    gap: 0.05vw;
    overflow: visible;
    padding-bottom: 10vh;
  }

  .item {
    position: relative;
    flex: 1;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: flex 0.8s ease;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    overflow: visible;
  }


  .item-title {
    position: absolute;
    bottom: 10px;
    left: 20px;
    font-size: 1.5vh;
    font-weight: 200;
    letter-spacing: 5px;
    color: rgb(255, 255, 255);
    opacity: 0;
    text-decoration: none;
    transition: opacity 0.3s ease, letter-spacing 1.2s ease;
  }

  .item:hover .item-title {
    opacity: 1;
    letter-spacing: 11px; /* Increase letter spacing */
    transition: opacity 0.3s ease, letter-spacing 1s ease;
    transition-delay: 0.7s;
  }
  
  .item-title:hover {
    text-decoration: underline; /* Optional: underline on hover for the link */
  }
  .item-1 { 
    background-image: url('assets/melis.jpg');
  }
  
  .item-2 { 
    background-image: url('assets/melis_2.jpg');
  }
  
  .item-3 { 
    background-image: url('assets/chelsea.JPG');
  }
  
  .item-4 { 
    background-image: url('assets/weber.png');
  }

  .item-5 { 
    background-image: url('assets/asia.png');
  }

  .item-6 { 
    background-image: url('assets/adrian.png');
  }
  
  .item-7 { 
    background-image: url('assets/cxd_2.jpg');
  }
  
  .item-8 { 
    background-image: url('assets/Leo_2.jpg');
  }
  
  .item-9 { 
    background-image: url('assets/Leo.jpg');
  }

  .item-10 { 
    background-image: url('assets/cxd.JPG');
  }

  .item-12 { 
    background-image: url('assets/innsbruck.png');
  }

  .item-11 { 
    background-image: url('assets/marten.png');
  }

  .item-13 { 
    background-image: url('assets/kks.png');
  }
  .item-14 { 
    background-image: url('assets/Raul.jpg');
  }

.item-1:hover {
  flex-grow: 5; 
}

.item-2:hover {
  flex-grow: 5; 
}

.item-3:hover {
  flex-grow: 5; 
}

.item-4:hover {
  flex-grow: 15; 
}

.item-5:hover {
  flex-grow: 25; 
}

.item-6:hover {
  flex-grow: 25;
}

.item-7:hover {
  flex-grow: 5;
}

.item-8:hover {
  flex-grow: 25;
}

.item-9:hover {
  flex-grow: 25;
}

.item-10:hover {
  flex-grow: 15;
}

.item-11:hover {
  flex-grow: 20;
}

.item-12:hover {
  flex-grow: 15;
}

.item-13:hover {
  flex-grow: 15;
}

.item-14:hover {
  flex-grow: 20;
}


  #mobile {
    display: none;
  }

  section{height: 100vh;}
}

@media (orientation: portrait){
  #text-animation {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: 2vh;
    font-weight: 200;
    letter-spacing: 10px;
}
#image-container {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#image-container img {
  max-width: 10vw;
  max-height: auto;
  border-radius: 10px;
  z-index: 999;
}
#gallery{display: none;}
h1{
  font-size: 2vh;
  font-weight: 200;
  letter-spacing: 10px;
}
.mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10vh; 
}
.item-container {
  width: 60vw;
  
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.item-container img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Add a hover effect on the images */
.item-container img:hover {
  transform: scale(1.01); /* Zoom effect */

}


.title {
  font-size: 1.5vh;
  color: #ffffff; /* Default color */
  padding-top: 1.5vh;
  padding-bottom: 7vh; 
  font-weight: 200;
  letter-spacing: 0px;
  font-family: 'Source Sans 3', sans-serif;
  transition:; letter-spacing 1.2s ease;
  pointer-events: none; /* Prevents interaction with title */
}

/* Change the title color when the image is hovered */
.item-container img:hover + .title {
  color: #000000; /* Change to a blue color on hover, you can choose any color */
  letter-spacing: 10px; 
letter-spacing: 7px; /* Increase letter spacing */
transition:letter-spacing 1s ease; 
}

  section {height: auto;}
}


footer{
  padding-top: 0vh;
  text-align: center;
  font-size: 1.5vh;
  font-weight: 200;
  letter-spacing: 10px;
  font-family: 'Source Sans 3';
  color: black;
  
  &:hover{color: rgb(255, 0, 0);}
}