/* styles.css */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: Arial, sans-serif;
  background: black;
  overflow-y: scroll; /* Allow vertical scrolling */
  overscroll-behavior: none; /* Disable bounce-back overscroll on mobile */

}


/* Top Navigation */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
  z-index: 100; /* Ensure it stays above other elements */
}

.nav-link {
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
  color: black; /* Matches headline color */
  transform: scale(1, 1.5); /* Stretch vertically by 1.5x */

}

/* Specific adjustments for the INFO link */
.nav-right {
  position: fixed; /* Fix the INFO link to the right side */
  top: 1rem; /* Keep it aligned vertically with the nav bar */
  right: 2rem; /* Add space from the right edge */
}


.nav-link:hover {
  color: ; /* Slightly brighter yellow on hover */
  text-decoration: underline;
}

.nav-left {
  text-align: left;
}

.nav-right {
  text-align: right;
}





.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1; /* Place behind everything */

}


.scroll-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end; /* Align items to the bottom */
  overflow: hidden;
  white-space: nowrap; /* Prevent line breaks */
  overscroll-behavior: contain; /* Prevent snapping back or overscrolling */
  scroll-behavior: smooth;
    overflow-x: hidden; /* Prevent horizontal scrollbars */
}



.headline-container {
  display: inline-flex;
  white-space: nowrap;
  transform: translateX(0);

}



.headline {
  margin: 0 5rem;
    font-size: 10vw;
  line-height: 1; /* Ensure no extra space around text */
  color: black;
    transform: scale(1, 1.5); /* Stretch vertically by 1.5x */

}

.headline-link {
  text-decoration: none; /* Remove underline */
  color: inherit; /* Ensure the link uses the parent element's text color */
}


.headline-link:hover .headline {
  color: yellow; /* Slightly brighter yellow on hover */

}


/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .headline {
    font-size: 2rem; /* Adjust font size for smaller screens */
    margin: 10 1rem;
        transform: scale(1, 3.5); /* Stretch vertically by 1.5x */
        margin-bottom: 5rem;

  }




  .scroll-container {

  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
}

 .headline.special {
  background-image: url('images/content_backgrounds2/003_rafael-nadal-1.jpg'); /* Default image for desktop */

  }


/* Top Navigation */
.top-nav {
  padding: 1rem 1rem;
  z-index: 100; /* Ensure it stays above other elements */
}

/* Specific adjustments for the INFO link */
.nav-right {
  right: 1rem; /* Add space from the right edge */
}

}