/* General Styles */
html, body {
  height: 100%; /* Ensures the body takes up full height */
}

body {
  font-family: 'Space Mono', monospace;
  margin: 0;
  padding: 0;
  background-color: #fff; /* Light gray background */
  color: #000;
  display: flex;
  flex-direction: column;
  font-size: 0.8rem; /* Reduce font size */
}

header {
  text-align: center;
  padding: 20px 0;
  background-color: #fff; /* White background for the header */
  margin-top: 50px; /* Add space above the header */
}

header .subhead {
  margin-top: 10px; /* Space between the H1 and subhead */
  font-family: 'Space Mono', monospace; /* Font for subheading */
  font-size: 1rem; /* Subheading font size */
  color: #333; /* Subtle gray color for the subhead */
  text-align: center; /* Center-align the subhead */
  font-weight: 300; /* Thinner weight for the subhead */
}

h1 {
  margin: 0;
  font-family: 'Rubik Mono One', sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  font-size: 2rem; /* Reduce font size */
}

h3 {
  margin-top: 10px; /* Space between the H1 and subhead */
  font-family: 'Space Mono', monospace; /* Font for subheading */
  font-size: 0.8rem; /* Subheading font size */
  color: #333; /* Subtle gray color for the subhead */
  text-align: center; /* Center-align the subhead */
  font-weight: 300; /* Thinner weight for the subhead */
}

main {
  padding: 20px;
  flex-grow: 1; /* Ensures the main content takes available space */
}

#products {
  margin: 0 auto; /* Centers the #products div horizontally */
  max-width: 1200px; /* Optional: set a maximum width for the products section */
  margin-bottom: 50px;
}

#product-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product {
  background: #fff;
  padding: 15px;
  display: flex;
  flex-direction: column; /* Stack image and text vertically */
  align-items: center; /* Center-align product info */
}

.product img {
  max-width: 75%;
  margin-bottom: 10px; /* Adds space between the image and product info */
}

.product-info {
  text-align: center; /* Center-align text inside the product info */
  width: 100%; /* Makes the product info span the width of the product container */
}

.order-button {
  display: block;
  text-align: center;
  background: #fff;
  color: #000;
  padding: 10px;
  text-decoration: none;
  font-size: 1rem;
  font-family: 'Rubik Mono One', sans-serif; /* Apply Rubik Mono One font to the button */
  border: 4px solid #000; /* Added stroke (border) */
  border-radius: 5px;
  margin: 0 auto 100px auto;
  max-width: 150px;
  transition: background-color 0.3s, color 0.3s, transform 0.2s; /* Smooth transition for hover and active effects */
}

/* Hover State */
.order-button:hover {
  background: #000; /* Black background */
  color: #fff; /* White text */
}

/* Active State (Down State) */
.order-button:active {
  transform: scale(0.95); /* Slightly shrink the button when pressed */
  background: #333; /* Dark gray background */
  color: #fff; /* Keep text white */
}

/* About Section Styles */
#about {
  padding: 20px;
  background-color: #fff; /* Light background for the about section */
  margin: 0 auto 140px auto; /* Space between the product section and about section */
}

#about h2 {
  font-family: 'Rubik Mono One', sans-serif;
  font-size: 1.4rem;
  margin-bottom: 10px;
  text-align: center;
}

#about p {
  font-family: 'Space Mono', monospace;
  font-size: 1rem;
  color: #333;
  line-height: 1.6; /* Adjust leading (line height) to improve readability */
  text-align: center; /* Center-align text for better readability */
  max-width: 800px; /* Limit the paragraph width */
  margin: 0 auto; /* Center the text block horizontally */
  padding: 0 15px; /* Add horizontal padding for smaller screens */
}

footer {
  text-align: center;
  padding: 10px 0;
  background-color: #000; /* Black background */
  color: #fff; /* White text */
  margin-top: auto; /* Pushes the footer to the bottom of the page */
  font-size: 0.75rem; /* Adjusted footer text size */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  header h1 {
    font-size: 1.5rem; /* Adjust header font size for smaller screens */
    margin-top: 30px; /* Reduce top margin for mobile */
  }
  
  header .subhead {
    font-size: 0.9rem; /* Slightly smaller font size on medium screens */
    margin-top: 8px; /* Adjust spacing for better proportions */
  }

  .product {
    padding: 10px;
    align-items: center; /* Center align product info for mobile */
  }

  .product img {
    max-width: 100%; /* Smaller images on mobile */
    min-width: 100%;
  }

  .order-button {
    width: 100%; /* Make the button take full width on mobile */
    font-size: 0.875rem; /* Slightly smaller font size for button on mobile */
  }
  
  #about h2 {
    font-size: 1rem; /* Smaller heading for medium screens */
  }

  #about p {
    font-size: 0.9rem; /* Reduce paragraph font size slightly */
    padding: 0 10px; /* Add padding for smaller screens */
  }

  footer {
    font-size: 0.8rem; /* Slightly larger font size for footer on mobile */
  }
}

@media (max-width: 480px) {
  header h1 {
    font-size: 1.2rem; /* Adjust header font size for very small screens */
  }
  
  header .subhead {
    font-size: 0.8rem; /* Smaller font size for very small screens */
    margin-top: 6px; /* Tighter spacing for compact layout */
  }

  .product {
    padding: 8px;
  }

  .product img {
    max-width: 70px; /* Further reduce image size on very small screens */
  }

  .order-button {
    font-size: 0.85rem; /* Further reduce button text size */
  }
  
   #about h2 {
    font-size: 0.9rem; /* Even smaller heading for very small screens */
  }

  #about p {
    font-size: 0.8rem; /* Further reduce font size */
    line-height: 1.4; /* Adjust line height for smaller text */
    padding: 0 5px; /* Add extra padding for very small screens */
    max-width: 90%; /* Ensure it takes up most of the screen on very small devices */
  }

  footer {
    font-size: 0.7rem; /* Further reduce footer text size */
  }
}