.type-it {
  display: inline-block; /* Ensures it only takes up necessary space */
  max-width: 100%; /* Prevents it from overflowing */
  white-space: nowrap; /* Stops text from wrapping unexpectedly */
  overflow: hidden; /* Ensures it doesn't exceed its container */
  pointer-events: all; /* Allow clicks on the text and links */
}

.container {
  display: inline-flex; /* Use inline-flex to wrap content tightly */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  text-align: center;
  font-size: 1.5em; /* Adjusted base font size */
  height: auto; /* Ensure height only wraps the content */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; /* Ensure it is above the particles */
  background: transparent; /* Make container background transparent */
  pointer-events: none; /* Disable clicks on the container itself */
  padding: 0; /* Remove any padding */
  margin: 0; /* Remove any margin */
  border: none; /* Remove any border */
}

.container * {
  pointer-events: all; /* Allow clicks on child elements (text and links) */
}

/* Ensure the particles canvas covers the entire background */
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0; /* Ensure it is behind the container */
  pointer-events: all; /* Allow clicks on the particles */
}

/* Media Queries for Mobile Devices */
@media (max-width: 480px) {
  .container {
    width: auto; /* Adjust the width to auto */
    padding: 0; /* Remove padding */
  }
  .type-it {
    font-size: calc(1.5em * 0.8); /* Slightly smaller on mobile */
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .container {
    width: auto; /* Adjust the width to auto */
  }
  .type-it {
    font-size: 1.5em;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    width: auto; /* Adjust the width to auto */
  }
  .type-it {
    font-size: calc(1.5em * 1.2);
  }
}

@media (min-width: 1025px) {
  .container {
    width: auto; /* Adjust the width to auto */
  }
  .type-it {
    font-size: calc(1.5em * 1.4);
  }
}

/* Portrait mode specific adjustments */
@media screen and (orientation: portrait) {
  .container {
    width: auto; /* Adjust the width to auto */
  }
  .type-it {
    font-size: calc(1.5em * 0.9);
  }
}

/* Landscape mode specific adjustments */
@media screen and (orientation: landscape) {
  .container {
    width: auto; /* Adjust the width to auto */
  }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  .container {
    width: auto; /* Adjust the width to auto */
    padding: 0; /* Remove padding */
  }
}