@media (min-width: 741px) { /* Targets non-mobile screens */
  .scroll-indicator {
    display: none !important; /* Completely removes it from layout */
  }
}


/* Default light mode styles */
body {
  background-color: #f9f9f9;
  color: #333; /* Default text color */
}





/* Dark mode styles */
body.dark-mode {
  background-color: #0D0D0D;
  color: #FFFFFF; /* Default light text */
}

.dark-mode .content-wrapper {
  background-color: transparent; /* Ensure the wrapper blends seamlessly */
}

.dark-mode .project-text h1,
.dark-mode .project-text p {
  color: #FFFFFF; /* Light text for headings and paragraphs */
}

.dark-mode .project-header .date-range {
  color: #515151; /* Subtle gray for the date range */
}

.dark-mode .project-blurb {
  color: #FFFFFF; /* Ensure text contrasts well */
}

.dark-mode .project-screenshots img {
  filter: brightness(0.9); /* Slight dimming for dark mode images */
}

.dark-mode .home-button img {
  filter: brightness(1); /* Keep the home button unaffected or subtly lighter */
}

/* Adjust shadows for dark mode */
.dark-mode .home-button {
  box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1); /* Subtle light shadow for dark background */
}


/* General Wrapper */
.content-wrapper {
  max-width: 900px;
  margin: 0 auto; /* Center content */
  padding: 0; /* No padding inside */
  width: 100%; /* Ensure it takes full available width */
}

/* Project Body */
.project-body {
  display: flex;
  flex-direction: column;
  gap: 180px; /* Consistent gap between sections */
  margin-bottom: 70px;
}


.home-link {
  text-decoration: none; /* Removes the default underline on links */
}

.home-button {
  position: fixed;
margin-top: 24px;
width: 68px;
height: 68px;
display: flex;
justify-content: center;
align-items: center; 
overflow: hidden; 
z-index: 9999; 
 box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.1); 
   border-radius: 50%; 
     transition: transform 0.2s ease, box-shadow 0.2s ease; 
}

.home-button:hover {
transform: scale(1.2); /* Slightly increase the size */
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15); / Enhance the shadow on hover */
}

.home-button img {
width: 100%; /* Scale the image to fit the button */
height: 100%; / Maintain aspect ratio within the button */
object-fit: contain; / Ensure the image scales properly */
}


/* Project Header Section */
.project-header {
  display: flex;
  align-items: center;
  margin-top: 100px;
  margin-bottom: 120px; /* Space below the section */
}

.project-header-content {
  display: flex;
  justify-content: space-between; /* Automatically adjusts space between items */
  align-items: center; /* Vertically centers items */
  width: 100%; /* Ensures the container takes the full width available */
}

.project-text {
  flex: 1; /* Allow the text to take its natural space */
  max-width: 310px; /* Restrict text width */
  text-align: left; /* Keep the text aligned to the left */
}

.project-text h4 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.project-text h1 {
  font-size: 54px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.1;
}

.project-text p {
  font-size: 32px;
  margin-bottom: 16px;
  line-height: 1.3;
}

/* In projects.css */
.project-header .date-range {
  font-family: var(--font-secondary);
  font-size: 22px;
  font-weight: 400;
  color: var(--date-range-color);
}

.project-image {
  flex: 1; /* Allow the image to take the remaining space */
  max-width: 500px; /* Set a max width for the image */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Ensure the image looks good */
}

.project-image img {
  width: 100%;
  height: auto;
  max-width: 375px; /* Original width */
  min-width: 200px;
  
  object-fit: cover;




  border: 12px solid #F6F6F6; /* Adds the stroke */
  box-sizing: border-box; /* Ensures border doesn't affect layout */
  border-radius: 38px; 


}

body.dark-mode .project-image img {
border-color: #1A1A1A; /* Adjust this color for dark mode */
}





/* Adding margin to each section inside project-body (for consistent spacing) */
.project-body section {
/*  margin-bottom: 40px; /* Set uniform bottom margin */*/
}

/* Screenshot Section */
.project-screenshots {
  display: flex;
  gap: 80px; /* Space between the screenshots */
  justify-content: center; /* Center the images within the section */
/*  margin-bottom: 80px; /* Space below the section */*/
  width: 100%; /* Ensure the section takes up the full width */


}

.project-screenshots img {
  width: 390px; /* Fixed width for each screenshot */
  height: 812px; /* Fixed height for each screenshot */
  object-fit: cover; /* Ensure the image scales correctly */

  
    border: 12px solid #F6F6F6; /* Adds the stroke */
    box-sizing: border-box; /* Ensures border doesn't affect layout */
    border-radius: 38px; 


}

body.dark-mode .project-screenshots img {
  border-color: #1A1A1A; /* Adjust this color for dark mode */
}


/* Background Section */
.project-background p {
  line-height: 1.7;
  margin-bottom: 20px; /* Adjust margin if needed */
  text-align: left; /* Left-align text in the background section */
}

/* Project Blurb */
.project-blurb {
  width: 100%; /* Ensures the background takes up the full width */




}

.project-blurb p {
  font-size: 28px; /* Adjust font size as needed */
  margin-bottom: 16px; /* Space between paragraphs */
  text-align: center; /* Center-align the text */
}






  .footer .recent-projects li a:hover
  {
	  color: #000;
	  background-color: #fff;
	  border-radius: 16px;
	  padding: 8px 12px 8px 20px;
	
  }
  
  
  
  .footer .recent-projects li.current a:hover
  {
	  color: #fff;
	  background-color: #000;
	  border-radius: 16px;
	  padding: 8px 12px 8px 0px;

	
  }
  
  /*
  
  .footer .recent-projects .current .emoji
  {
  	
	  margin-right: 0px;
  }
  
  
  
  
  
  .footer .recent-projects .current {
	  
    font-weight: bold; 
	opacity: 0.15;

    cursor: default; 
  }
  
  */
  
  
  
  
  






  .app-store-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  
  .app-store-button:hover {
    transform: scale(1.1);
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
  }









  .app-store-image {
    max-width: 170px;
    width: 100%; /* Allows scaling if inside a smaller container */
    height: auto; /* Maintains the aspect ratio */
	margin-top: 12px;
  }



/* ========================
   Funky inbetween (481px - 1024px)
======================== */

@media (min-width: 1025px) and (max-width: 1500px) {
	
	


	.project-screenshots {
	    display: flex;
	    justify-content: center;
	    gap: 20px;

	    width: 100%;
	  }
	  .project-screenshots img {
	    width: clamp(250px, 25vw, 380/817px);
	    height: auto;
	    aspect-ratio: 380/817/812;

    
  


	  }
	
 
	
	
}
















/* ========================
   Tablet (481px - 1024px)
======================== */
@media (min-width: 741px) and (max-width: 1024px) {



	  .content-wrapper {
	    max-width: 84%;
	    padding: 0;
	  }

	  .project-header-content {
	    width: 100%;
	    justify-content: flex-start;
	    text-align: left;
	    gap: 40px;
	  }

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

  /* Project Header Section */
  .project-header {
    margin-top: 60px;
    margin-bottom: 100px; /* Adjust spacing for tablet */
  }



  .project-text h1 {
    font-size: 48px; /* Adjust heading size for tablets */
  }

  .project-text p {
    font-size: 26px; /* Slightly smaller paragraph text */
  }
  
  
  .project-image {
    max-width: 200px;
  }

  .project-image img {
    width: 300px;
    height: auto;
    aspect-ratio: 380 / 817;
  }

.project-screenshots {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 60px;
    width: 100%;
  }

  .project-screenshots img {
    width: calc((100% - 40px) / 3); /* Distribute space equally among 3 images, accounting for gaps */
    height: auto;
    aspect-ratio: 380/817 / 812; /* Maintain original aspect ratio */
    min-width: 0; /* Allow images to shrink below their natural size */
    object-fit: cover;

    border: 6px solid #F6F6F6; /* Adds the stroke */
    box-sizing: border-box; /* Ensures border doesn't affect layout */
    border-radius: 24px; 


    
  }
 

  /* Project Background and Blurb */
  .project-background p {
    font-size: 22px; /* Smaller font size for tablet */
    line-height: 1.6;
  }

  .project-blurb {
    text-align: center; /* Ensure text is center-aligned */
   
  }

  .project-blurb p {
    font-size: 24px; /* Adjust font size */
    margin-bottom: 20px;
  }

  /* Footer Section 
  
  
  .footer {
    padding: 30px 20px; 
  }

  .footer h4 {
    font-size: 18px; /
  }

  .contact-methods a {
    font-size: 28px;
  }

  .contact-methods p {
    font-size: 30px;
    padding-bottom: 40px;
  }
  */  

  /* Project Body */
  .project-body {
    display: flex;
    flex-direction: column;
    gap: 100px; /* Consistent gap between sections */
    margin-bottom: 300px;
  }
  
  

  

  
}

@media (max-width: 740px) {
	
	
/* Scroll Indicator Container */
.scroll-indicator {
  width: 30%;
  height: 8px; /* Adjust thickness */
  background: rgba(0, 0, 0, 0.1); /* Light background */
  border-radius: 8px;
  overflow: hidden;
  margin-top: 0px; /* Space below images */
  position: relative;
  
  left: 35%; /* Start at the middle */
}

/* Scroll Progress Bar */
.scroll-progress {
  height: 100%;
  width: 10%; /* Start with small width */
  background: black; /* Visible bar */
  border-radius: 8px;
  transform: translateX(0); /* Ensures no animation delay */
}


/* Dark Mode Scroll Indicator */
body.dark-mode .scroll-indicator {
  background: rgba(255, 255, 255, 0.2); /* Lighter background for dark mode */
}

/* Dark Mode Progress Bar */
body.dark-mode .scroll-progress {
  background: white; /* Light progress bar for visibility */
}
	
	
  .content-wrapper {
    max-width: 70%;
    padding: 0;

  }

  .project-header {

    margin-top: 140px;
    margin-bottom: 60px;
  }

  .project-header-content {

	flex-direction: column;
    gap: 32px;
  }

  .project-text {
    max-width: 90%;
  }

  .project-text h4 {
    font-size: 18px;
    margin-bottom: 8px;
	
  }

  .project-text h1 {
    font-size: 32px;
    margin-bottom: 8px;
  }

  .project-text p {
    font-size: 22px;
    margin-bottom: 12px;
  }

  .project-image {
    max-width: 100%;
    display: flex;
    justify-content: center;
  }

  .project-image img {
	  width: 100%; /* Ensure the image fits the screen width */

	     margin: 0 auto;


       border: 6px solid #F6F6F6; /* Adds the stroke */
       box-sizing: border-box; /* Ensures border doesn't affect layout */
       border-radius: 34px; 
  }

  .project-body {
    gap: 34px;
    margin-bottom: 120px;
  }

  .project-screenshots {
    width: 100%;          /* Full viewport width */
    margin-left: 0px;
	  display: flex;
	  overflow-x: auto;
	  gap: 40px;
	  padding: 0 20px;
	  justify-content: flex-start;
	  /* scroll-snap-type: x mandatory; */
	     -webkit-overflow-scrolling: touch;

	     scrollbar-width: none;
	     -ms-overflow-style: none;

		 
		 
  }
  
  .project-screenshots::-webkit-scrollbar {
    display: none;
  }

  .project-screenshots img {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 380/817/812;
	
    border: 8px solid #F6F6F6; /* Adds the stroke */
    box-sizing: border-box; /* Ensures border doesn't affect layout */
    border-radius: 26px; 
	
	scroll-snap-align: left;
	
  }

  .project-background p,
  .project-blurb p {
    font-size: 18px;
    line-height: 2.0;
  }
  
  
  
  .home-button {
	  
      width: 52px;
      height: 52px;
	  
  	/*position: fixed;
  margin-top: 24px;
    width: 68px;
    height: 68px;
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: hidden; 
    z-index: 9999; 
     box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.1); 
       border-radius: 50%; 
  	   transition: transform 0.2s ease, box-shadow 0.2s ease;
	*/
  }
  
  



  
  
  
}