.text-container {
    /* border: 2px solid black; */
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
    width: 90vw; /* Set width to 100% of viewport width */
    height: 90vh; /* Set height to 100% of viewport height */
    max-width: 100%;
    margin-bottom: 200px;
  }

  .image-link {
    display: inline-block; /* Shrinks the anchor to wrap only around the image */
  }
  

.text {
  font-size: 30px;
  padding-bottom: 30px;
}

.imageRestraint {
  width: 1000px;
}

#yellowTurtleSlide {
  width: 25%; /* or a specific width, e.g., 500px */
  margin: 0 auto; /* Automatically adjusts left and right margins */

}
#yellowTurtleSlide2 {
  width: 55%; /* or a specific width, e.g., 500px */
  margin: 0 auto; /* Automatically adjusts left and right margins */

}

#firstSlide {
  width: 50%; /* or a specific width, e.g., 500px */
  margin: 0 auto; /* Automatically adjusts left and right margins */
}

.habitat {
  width: 40%;
}





#YellowTurtleImage {
  margin-top: 30px;
}


.hoverEffect {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.hoverEffect:hover {
  transform: scale(1.1); /* Slightly enlarges the image */
  filter: brightness(1.1); /* Makes the image slightly brighter */
  border: 2px solid #4CAF50; /* Optional: Adds a border */
  border-radius: 25px; /* Optional: Rounds the corners */
}


img {
  max-width: 50%;
  display: block;
  margin-bottom: 20px;
  border-radius: 20px;
}


.sub-Container {
  display: inline-flex;
  align-items: center;
  width: 90vw;
}

.flipped-image {
  transform: scaleX(-1);
}

#MoreStylesToGif {
  width: 300px;
  border: 2px solid rgb(0, 0, 0);

}


#centeredStuff{
  align-items: center;
}

#smallerVSCodePhoto{
  width: 600px;
}


.text-container * {
  /* border: 2px solid black;*/
  justify-content: space-between; /* or other values like flex-start, center, flex-end */
}


.CircularContainer {
  width: 500px;
  height: 500px;
  display:grid;
  justify-content: center;
  align-items: center;
}



.box {
  width: 200px;
  height: 100px;
  text-align: center; /* Horizontally center the text */
  display: flex; /* Turn the box into a flex container */
  justify-content: center; /* Horizontally center the content */
  align-items: center; /* Vertically center the content */
  border: 1px solid #ccc; /* Just for visualization */
  font-size: 35px;
}


#arrowAlt {
  width: 100px;
  margin-top: 20px;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.5s ease-in-out; /* Adjust timing and easing function as needed */
}

.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease-in-out; /* Adjust timing and easing function as needed */
}

.text-container p {
    text-align: center;
}

.text-container p2 {
    font-size: 60px;
    text-align: center;
    
}


.text-container p3 {
    font-size: 35px;    
    margin-bottom: 20px;
    text-align: center;
    
}