main {
  display: flex;
  flex-direction: column;
}

#main2 {
    background-color: lightgreen;
}

#main1, #main2, #main3, #main4, #main5 {
    height: 100vh; /* Chaque section prend 100% de la vue */
}

#main1 {
  background-color: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#imageContainer {
  display: flex;
}

.imageLink {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  text-align: center;
  text-decoration: none; /* Remove default underline for links */
  color: black; /* Set the text color */
  width: 600px;
  height: 600px;
  
  transition: transform 0.5s ease-in-out, width 0.5s ease-in-out, height 0.5s ease-in-out;
  transform-origin: center center;
}


.imageLink img {
  height: 100%;
  width: auto;
  margin-bottom: 5px; /* Add margin between image and text */
  transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
  max-width: 400px;
  }
  
/* Center the first image */
.imageLink:first-child {
  margin-left:50%;
  transform: translateX(-50%);
}

/* Set the margin for images 2 and beyond */
.imageLink:nth-child(n+2) {
  margin-left: 350px;
  transform: translateX(-50%);
}