body, html {
  margin: 0;
  padding: 0;
  background-color: rgb(255, 255, 255);
  height: 100%;
}
.header {
  position: fixed;
  width: 100%;
  color: rgb(40, 40, 40);
  background: transparent;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
}
.header a {
  color: rgb(40, 40, 40);
  text-decoration: none;
  font-family: Helvetica , sans-serif;
}
/* Navigation link styles */
.header .right a {
  cursor: pointer;
  text-decoration: none; /* Removes underline by default */
  color: rgb(40, 40, 40); /* Set the text color */
  padding: 5px; /* Adds some padding around the links */
}

/* Hover effect */
.header .right a:hover {
  text-decoration: underline; /* Underline on hover */
  text-decoration-color: rgb(40, 40, 40);
}

/* Active (clicked) link style */
.active {
  text-decoration: underline; /* Keeps the underline for active link */
  text-decoration-color: rgb(40, 40, 40);
}

.header a.left:hover {
  text-decoration: underline; /* Underline the text */
  color: rgb(40, 40, 40); /* Change color on hover - choose a color that fits your design */
}

@media screen and (max-width: 1050px) {
  .header .left , .header .right a {
    font-size: 15px; /* Larger font for better readability on small screens */
  }

  .mySlides img {
    width: auto;
    height: 100vh;
    max-width: none;
    position: absolute;
    left: 50%;
    top: 50%;
    /* Ensure the image is centered and does not stretch */
    transform: translate(-50%, -50%);
    object-fit: cover;
  }

  .slideshow-container {
    overflow: hidden; /* Hide the parts of the images that do not fit */
  }

  /* Adjust the header so it takes up less space and doesn't overlap the image too much */
  .header {
    background: rgba(255, 255, 255, 0); /* Slightly transparent background for legibility */
    padding: 8px;
  }
}

@media screen and (orientation: landscape) {
  .mySlides img {
    /* This will make sure that the image fits the screen's height */
    width: auto;
    height: 100vh;
    position: absolute;
    left: 50%;
    top: 50%;
    /* Center the image and maintain aspect ratio without stretching */
    transform: translate(-50%, -50%);
    object-fit: cover;
  }
}
.mySlides {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
}

.mySlides {
  display: block; /* Ensure images are initially displayed */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* Start images fully transparent */
  transition: opacity 2s ease-in-out; /* Smooth transition for fade in and out */
}

.header .left .arrow {
  position: relative;
  text-decoration: none;
  font-size: large;
}

body, html {
  margin: 0;
  padding: 0;
  background-color: rgb(255, 255, 255);
  color: rgb(40, 40, 40);
  height: 100%;
  font-family: Helvetica, sans-serif; /* or any other font you're using */
}

.content {
  width: 22%;
  margin: 0px;
  padding-top: 40px;
  padding-left: 30px;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.5s ease-out forwards;
  animation-delay: 0.1s;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.content h1, .content h2, .content p {
  font-weight: normal; /* This will make the text normal (not bold) */
}

.content h1 {
  font-size: 16px; /* Adjusted font size for main heading */
  padding-bottom: 0.5em; /* Space below the heading */
  color: rgb(40, 40, 40);
  text-decoration: none;
  font-family: Helvetica, sans-serif;
  margin-bottom: 0; /* Removes bottom margin */
}

/* Add a new rule for the 'Photography ongoing series (2020- )' paragraph */
.content .series-description {
  font-size: 12px; /* Set the font size to 12px */
  line-height: 1; /* Adjust line height for readability */
  margin-top: 0; /* Adjust top margin to reduce the gap */
  margin-bottom: 1em; /* Space after the paragraph */
  text-align: left;
  font-style: italic;
}
.content h2 {
  font-size: 16; /* Slightly smaller font size for section headings */
  padding-top: 0; /* Space above section headings */
}

.content p {
  font-size: 12px; /* Standard text size */
  line-height: 1.5; /* Adjust line height for readability */
  margin-bottom: 1em; /* Space after each paragraph */
  text-align: left;
}

.fixed-space {
  display: inline-block;
  width: 50px; /* Set the width to the space size you want */
}

.cv-link {
  color: rgb(40, 40, 40); /* Sets the link color to white */
  padding: 8px 0px; /* Adds some padding around the link text */
  text-decoration: none; /* Removes the default underline */
  font-weight: normal; /* Makes the link text bold */
  display: inline-block; /* Allows you to add padding and center the link */
  margin-top: 0px; /* Adds space between the link and the preceding content */
  cursor: pointer; /* Changes the mouse cursor to indicate the link is clickable */
  border-radius: 0px; /* Optional: Rounds the corners of the link background */
  transition: background-color 0.3s; /* Smooth transition for hover effect */
  font-size: 14px
}

.cv-link:hover {
  background-color: #33333300; /* Darkens the background slightly on hover */
  text-decoration: underline; /* Adds an underline on hover */
}

@media only screen and (max-width: 700px) {

  .content {
    width: 100%; /* Full width on smaller screens */
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 80px;
    padding-bottom: 60px; /* Adjust padding to be smaller on mobile */
    box-sizing: border-box; /* Include padding in width calculation */
  }

  .cv-link {
    /* Adjust CV link padding and font size for smaller screens */
    padding: 8px;
    font-size: 16px; /* Larger font size for better readability */
    display: block; /* Block display to take full width */
    text-align: left; /* Center the text if the link is now a block */
    margin: 20px auto; /* Adds vertical margin and centers horizontally */
  }

  /* You can add more adjustments for other elements as needed */
  .content h1 {
    font-size: 24px; /* Adjust as necessary */
  }

  .content h2 {
    font-size: 20px; /* Adjust as necessary */
  }

  .content p {
    font-size: 16px; /* Adjust as necessary */
  }

  .content .series-description {
    font-size: 14px; /* Set the font size to 12px */
    font-style: italic;
  }
  /* Styles for mobile phones */
  @media only screen and (max-width: 600px) {
    .content h1 {
      font-size: 20px; /* Larger font size for mobile screens */
    }

    .content h2 {
      font-size: 16px; /* Smaller font size for mobile screens */
    }

    .content p {
      font-size: 16px; /* Larger font size for mobile screens */
    }

    /* Adjust any other text elements you may have */
  }

}

.image-container {
  position: absolute; /* Make it position absolutely within the body */
  top: 0; /* Align it to the top */
  right: 0; /* Align it to the right */
  width: 65%; /* Take up 65% of the width */
  height: 100%; /* Full height to match the content area */
}

/* Style for the images inside the container */
.image-container img {
  width: 100%; /* Make images take up 100% width of their container */
  height: auto; /* Keep their aspect ratio */
  display: block; /* Stack them on top of each other */
  margin-bottom: 0px; /* Add some space between the images */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
              transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-container img.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media only screen and (max-width: 700px) {
  .content, .image-container {
    width: 100%; /* Full width for smaller screens */
    position: relative; /* Position relative for the mobile layout */
  }
  .image-container {
    order: 2; /* Ensure images come after the text on mobile */
  }
}
.footer {
  position: fixed; /* Fixed positioning for the footer */
  bottom: 0; /* Align it to the bottom */
  left: 0; /* Align it to the left */
  width: 100%; /* Full width */
  margin: 0px ; /* Center the content */
  background-color: #2D3505; /* Footer background */
  color: #dadada; /* White text */
  text-align: left; /* Align text to the right */
  padding-left: 10px;
  padding-top: 6px;
  padding-bottom: 8px;
  font-size: 10px; /* Smaller text */
  z-index: 1000; /* Ensure footer stays above other content */
  margin: 1;
  line-height: 1; /* Compact line spacing */
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.footer p {
  margin: 0;
}

@media only screen and (max-width: 600px) {
  .footer {
    width: 100%; /* Full width on smaller screens */
    padding-left: 20px;
    padding-right: 15px;
    box-sizing: border-box; /* Include padding in width calculation */
    font-size: 8px; /* Smaller text size */
    box-sizing: border-box; /* Include padding in width calculation */
  }
}