/* Background container for Enso image */
.background-container {
  position: fixed; /* Keeps the background image fixed in place when scrolling */
  top: 0; /* Aligns the background at the top of the viewport */
  left: 0; /* Aligns the background at the left of the viewport */
  width: 100%; /* Makes the background span the entire width of the screen */
  height: 100%; /* Makes the background span the entire height of the screen */
  background-image: url('../images/icons/enso.png'); /* Sets the background image */
  background-position: center; /* Centers the image within the container */
  background-size: contain; /* Scales the image to fit within the container without stretching */
  background-repeat: no-repeat; /* Prevents the background from repeating */
  opacity: 1; /* Fully visible background */
  z-index: 0; /* Ensures the background stays behind other content */
}

/* Center content for homepage */
.center-content {
  text-align: center; /* Centers the text horizontally */
  position: absolute; /* Allows precise positioning of the content */
  top: 50%; /* Moves the content down to the middle of the page */
  left: 50%; /* Moves the content to the middle horizontally */
  transform: translate(-50%, -50%); /* Perfectly centers the content both vertically and horizontally */
  padding: 20px; /* Adds space around the content for better readability */
}


.link-container {
  display: flex;
  justify-content: center;
  gap: 20px; /* Space between the icons */
  margin-top: 10px;
}

.social-icon {
  width: 24px; /* Adjust the icon size */
  height: 24px;
  transition: transform 0.3s ease;
}

.social-icon:hover {
  transform: scale(1.2); /* Slight zoom-in effect on hover */
}


/* Responsive styles for mobile devices */
@media (max-width: 768px) {
  .home-icon {
      width: 30px; /* Reduces the width of the home icon for smaller screens */
      height: 30px; /* Reduces the height of the home icon for smaller screens */
  }

  h1 {
      font-size: 24px; /* Reduces the heading size for smaller screens */
  }

  .center-content {
      padding: 10px; /* Reduces padding around content on smaller screens */
  }
}