/* Disable scrolling */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent scrolling */
  font-family: Arial, sans-serif;
}


/* 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;
}



/* Text Section on the Left */
.text-section {

  position: fixed; /* Keeps the section fixed on the left */
  top: 5rem; /* Space below the nav bar */
  left: 2rem; /* Align to the left */
  width: 25%; /* Fixed width for the text section */
  color: black;

}

.project-title {
  font-size: 0.7rem;
  margin-bottom: 1em;
    font-weight: bold;
  transform: scale(1, 1.5); /* Stretch vertically by 1.5x */
}

.project-paragraph {
  font-size: 0.8rem;
  line-height: 1.2;
  font-weight: ;
}

.project-paragraph a {
text-decoration: none;
}


/* Grid Wrapper */
.grid-wrapper {
  margin-left: 30%; /* Leave space for the text section */
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 12-column grid */
  gap: 1rem;
  margin-top: 5rem; /* Leave space for the nav bar */
  padding: 2rem;
}

/* Grid Items */
.grid-item {
  grid-column: span 12; /* Default full width */
}

/* Full Width */
.full-width {
  grid-column: span 12;
}

/* Two Column */
.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 1rem;
}

/* Three Column */
.three-column {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
  gap: 1rem;
}



/* Typography */
h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

/* Images */
img {
  display: block;
  width: 100%;
  height: auto;
}

/* Video Section */
.video-section {
  grid-column: span 12; /* Full-width in the grid */
    position: relative; /* Ensures the iframe is positioned inside this container */
  width: 100%; /* Full width */
  padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 = 0.5625 = 56.25%) */
  height: 0; /* Set height to 0 to let padding control the aspect ratio */
  overflow: hidden; /* Ensures content stays inside the container */

}


.video-section iframe {
  position: absolute; /* Position iframe absolutely inside the container */
  top: 0;
  left: 0;
  width: 100%; /* Full width of the container */
  height: 100%; /* Full height of the container */
      border-width: 0px;
}





/* Media Query for Mobile Devices */
@media (max-width: 768px) {


/* 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 */
}



  /* Adjust Text Section for Mobile */
  .text-section {
    position: static; /* Remove fixed positioning */
    top: auto;
    left: auto;
    width: 90%; /* Span the full width */
    padding: 1rem; /* Add padding for readability */
    margin-bottom: 1rem; /* Add spacing below text */
    margin-top: 6rem; /* Add space below the navigation */
  }

  /* Adjust Grid Wrapper for Mobile */
  .grid-wrapper {
    margin: 0 auto; /* Center the grid */
    padding: 1rem; /* Adjust padding for smaller screens */
        width: 100%; /* Ensure grid content doesn’t overflow */
            box-sizing: border-box; /* Include padding in width calculations */

  }

  /* Adjust Typography for Smaller Screens */
  .project-title {
    font-size: 1.5rem; /* Smaller title size */
  }

  .project-paragraph {
    font-size: 1rem; /* Adjust paragraph size */
    line-height: 1.5; /* Improve readability */
  }
}

 
  /* Reset for Images */
  img {
    max-width: 100%; /* Prevent images from exceeding their containers */
    height: auto; /* Maintain aspect ratio */
  }
}