/* ===================== */
/* GENERAL PAGE SETUP */
/* ===================== */
body {
  background-image: url("https://xombunnie.neocities.org/114179-Black-Seamless-Pattern.jpg");
  background-repeat: repeat;
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ===================== */
/* LACE SIDE BORDERS */
/* ===================== */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: 70px;
  background-image: url("https://xombunnie.neocities.org/235aabb02.png");
  background-repeat: repeat-y;
  background-size: contain;
  z-index: 5;
  pointer-events: none;
}

/* Left lace */
body::before { left: 0; }

/* Right lace */
body::after { right: 0; }

/* Optional: Thinner borders on small screens */
@media (max-width: 768px) {
  body::before,
  body::after { width: 40px; background-size: contain; }
}

/* ===================== */
/* TOP LACE BORDER */
/* ===================== */
.top-lace {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-image: url("https://xombunnie.neocities.org/235aabb0.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
  z-index: 6;
  pointer-events: none;
}

/* ===================== */
/* HEADER + DIVIDER STYLES */
/* ===================== */
img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hanging crosses */
.header-strip {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  width: 100%;
  padding-top: 70px; /* Push below top lace */
  z-index: 7;
}

.header-strip img {
  flex: 1 1 auto;
  max-width: 100%;    /* Prevent overflow */
  height: auto;
  object-fit: contain; /* Keep entire image visible */
}

/* Divider images */
.divider-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
}

.divider-strip img {
  flex: 1 1 auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* ===================== */
/* RESPONSIVENESS */
/* ===================== */
@media (max-width: 768px) {
  .header-strip,
  .divider-strip { 
    flex-wrap: wrap;      /* Allow wrapping only if needed */
    justify-content: center;
  }

  .header-strip img,
  .divider-strip img { 
    flex: 1 1 45%;        /* Each image takes ~45% of row */
    max-width: 45%;       /* Prevent stretching */
    margin: 5px;          /* Small gap between images */
  }
}