/* Main background styling */
body {
  --page-background-color: seagreen; /* Initial value, change as needed */
  background-color: var(--page-background-color);
  font-family: 'Courier New', Courier, monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

/* The rounded card layout */
.card {
  padding: 25px 40px;
  border-radius: 20px;
  width: auto; /* Changed from fixed 300px to auto so it flows in grid */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  margin: 10px 0;
  outline: 3px dashed ;
  outline-offset: -8px;
  position: relative;
}

.wrapper {
  display: grid;
  gap: 20px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  align-items: center;
  box-sizing: border-box;

  /* Define column sizes (e.g., 3 equal columns or flexible fr units) */
  grid-template-columns: repeat(3, 1fr);

  /* Define the layout template (3 rows, 3 columns each) */
  grid-template-areas:
    "content content about"
    "content content sewing_machine"
    "content content nav_fabrics";
  }

/* Link HTML child elements to their corresponding grid area */
.main-content {
  grid-area: content;
}

.about-section {
  grid-area: about;
  justify-self: end; /* Position the about section on the right edge */
}

.sewing-section {
  grid-area: sewing_machine;
  display: flex;           /* Make container a Flexbox */
  justify-content: flex-end; /* Align children to the end of the row */
  align-items: flex-end;   /* Align children to the end of the column */
}

.fabrics-nav {
  grid-area: nav_fabrics;
  justify-self: end; /* Position the about section on the right edge */
}

/* Image Stack Container */
.sewing-machine-container {
  display: grid;
  grid-template-areas: "stack";
  width: 100%;
  max-width: 600px;
  justify-items: center;
  align-items: center;
}

/* Target all image layers */
.background,
.midground,
.foreground,
.sewing-machine,
.fabric {
  grid-area: stack;
  width: 100%;       /* Allows images to shrink smoothly */
  max-width: 100%;   /* Prevents images from overflowing */
  height: auto;      /* Preserves aspect ratio */
}
.fabric{
  filter: opacity(0.2);
}

/* Stacking order */
.background { z-index: 1; }
.midground  { z-index: 2; }
.foreground { z-index: 3; }

h1 {
  margin-top: 0;

h2 {
  margin-top: 0;

}

ul {
  list-style-type: square;
  padding-left: 20px;
}

li {
  margin-bottom: 10px;
  font-size: 1.1rem;
}
/* ======================================================
   MOBILE RESPONSIVE MEDIA QUERY (Screens under 768px wide)
   ====================================================== */
@media (max-width: 768px) {
  .wrapper {
    grid-template-columns: 1fr; /* Single column on smaller screens */
    grid-template-areas:
      "content"
      "about"
      "sewing_machine"
      "nav_fabrics";
  }
}