/* CSS for linear gradient background */
body {
  background: linear-gradient(to right, #eef2f3, #8e9eab); /* Left to right gradient */
  color: #404040; /* Dark grey text */
  text-align: center; /* Center-align text content */
  opacity: 0; /* CSS to hide the content initially and provide the fade-in animation */
  transition: opacity 1.5s ease-in;
}

.topnav ul {
  list-style-type: none;
  padding: 0;
}

.topnav ul li {
  display: inline-block; /* Display list items horizontally */
  margin-right: 20px; /* Add some spacing between list items */
  position: relative; /* Position for text descriptions */
  text-align: center; /* Center-align text within list items */
}

/* Center-align the heading text */
h1 {
  text-align: center;
}

/* CSS class for smaller images using percentages */
.small-image {
  max-width: 50%; 
  max-height: 50%; 
  display: block; /* Center-align the image within the list item */
  margin: 0 auto; /* Center horizontally */
}

/* CSS for text descriptions */
.image-description {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.8);
  padding: 5px 10px;
  border-radius: 5px;
  font-weight: bold;
  z-index: 1;
  opacity: 0; /* Initially set opacity to 0 */
  visibility: hidden; /* Initially hide the text */
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; /* Add a transition */
  pointer-events: none; /* Prevent text from being clickable */
}

/* Show the text on image hover */
.small-image:hover + .image-description {
  opacity: 1; /* Show on hover */
  visibility: visible; /* Show the text */
  z-index: 2; /* Ensure text is above the image */
}

/* Custom CSS for oval-shaped button styling with fixed size */
.custom-button {
    background-color: #007bff; /* Blue background color for the button */
    color: #fff; /* White text color */
    border: none; /* Remove border */
    width: 120px; /* Set a fixed width */
    height: 40px; /* Set a fixed height */
    margin: 5px; /* Add margin */
    border-radius: 30px; /* Create an oval shape by increasing border-radius */
    cursor: pointer; /* Add a pointer cursor on hover */
    font-size: 16px; /* Adjust font size */
}

/* Style the buttons on hover */
.custom-button:hover {
    background-color: #0056b3; /* Darker blue color on hover */
}

/* Center the button container */
.button-container {
    display: flex;
    justify-content: center;
}

#slideshow-container li {
  transition: opacity 0.25s ease-in-out;
}

/* Contact Me Section Styling */
#contact {
  margin: 20px;
  padding: 20px;
  text-align: center;
}

.linkedin-button {
  width: 40px; /* Adjust the size as needed */
  height: 40px;
  margin: 10px;
  transition: transform 0.3s ease;

  /* Style for hover effect */
  &:hover {
      transform: scale(1.1);
  }
}