styles.css

/* css styles */


/* car wash 4 was table code/

/* Remove all horizontal lines in the table */
table {
    border-collapse: collapse;
  }
  
  table th, table td {
    border: none;
    padding: 8px;
  }
  
  table tr {
    border-bottom: none;
  }
  
/* end css code for 4 carwash table code/


/* this is for the index.qmd file to have side by side in pc and top and bottom in mobile */
/* Flex container for responsive sections */
/* added code to use in the new index.qmd file so the pictures are limited to a certain lenght and width. */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex-item {
  flex: 1 1 45%;
  margin: 10px;
  box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
  text-align: center; /* Center the content */
}

.flex-item img {
  max-width: 100%;
  height: auto;
  display: block; /* Ensures there's no extra space below the image */
}

@media (max-width: 768px) {
  .flex-item {
    flex: 1 1 100%;
  }
}


/* this is the end code for the side by side code for the index.qmd file */





/* this code adds the bubbles imagine to the index file */
body {
  background-image: url('Images/lightbluebubbles_background.jpg');
  background-size: cover;  /* Cover the entire viewport */
  background-position: center;  /* Center the background image */
  background-repeat: no-repeat;  /* Do not repeat the image */
  background-attachment: fixed;  /* Keep the background fixed during scrolling */
  min-height: 100vh;  /* Minimum height of 100% of the viewport */
}

/* end of code that adds bubbles imagine to index.qmd */



/* adding wider width to qmd files THIS CODE IS NO LONGER NEEDED*/

/* Custom width for the content */
.custom-width {
  max-width: 1400px; /* Set to 9 inches @900px */
  margin: 0 auto;
  padding: 20px; /* Optional: add padding to the content */
  box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

/* end of code for adding wider width */




/* This is for laundromat2.qmd and its for the scrollable images for the wash menu */

.scroll-container {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  padding: 10px;
}

.scroll-container img {
  flex: 0 0 auto;
  margin-right: 10px;
  width: 300px; /* Adjust width as necessary */
}

/* end of scrollable code for wash menu */



/* this is for the white table background for wash prices */
.wash-cycles-table table {
  background-color: white; /* Ensures only the specified table has a white background */
}

/* end of css for white table background */