/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root {
  --dk-color: #bf776b;
  --mid-color: #f2b1a4;
  --lt-color: #ffe8e3;
  --dkest-color: #8e534a;
  --accent: #226051;
}

/* Hide old title image */
.title-image {
  display: none;
}

/* Title image container with repeated background (3 times horizontally) */
#title-image-container {
  max-width: 900px;
  width: 25%;
  height: 150px;              /* adjust height as needed */
  margin: 0 auto 15px;        /* center horizontally with spacing below */
  background-image: url('title.jpeg');
  background-repeat: repeat-x;
  background-size: calc(100% / 1) 100%; /* 3 repeats horizontally, stretched vertically */
  background-position: top left;
  border: 0px solid var(--dkest-color); /* optional border */
}

html,
body {
  margin: 0;
  padding-top: 25px;
  padding: 0;
  height: 100%;
  font-family: Verdana;
  font-size: 11px;
  background-image: url('background.jpg');
  background-repeat: repeat;
  color: var(--dkest-color);
  padding: 1px;
  overflow-y: auto;
}

body a {
  color: blue;
  font-weight: bold;
}

#container {
  max-width: 900px;
  margin: 0 auto;
  margin-top: 15px;
  height: 100%;
}

h1,
h3,
h5 {
  color: var(--dk-color);
}

h2,
h4,
h6 {
  color: var(--accent);
}

#header {
  max-width: 850px;
  height: 105px;
  margin-left: 5px;
  margin-right: 5px;
  margin: 0 auto;
  background-color: var(--lt-color);
  border: 1px solid var(--dkest-color);
}

.title {
  font-size: 35px;
  text-align: center;
  font-style: italic;
}

#wrapper {
  margin: 0 auto;
  max-width: 860px;
}

/* Center the bottom two #two-boxes containers inside wrapper */
#two-boxes {
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  justify-content: center; /* center horizontally */
  margin-bottom: 10px; /* small space between rows */
}

.content {
  padding: 10px;
}

/* Boxes styling */
.box-one,
.box-two,
.box-three,
.box-four,
.box-five,
.box-six {
  border: 1px dotted var(--dkest-color);
  background-color: var(--lt-color);
  overflow: auto;
}

/* Boxes 1 & 2 (top row) */
.box-one,
.box-two {
  height: 200px;
  width: 418px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
}

/* Boxes 3 & 4 (bottom row) */
.box-three {
  margin-left: 5px;
  margin-top: 5px;
  width: 260px;
  height: 326px;
}

.box-four {
  margin-top: 5px;
  margin-left: 5px;
  width: 581px;
  height: 326px;
}

/* Section title style */
.section-title {
  text-align: center;
  font-weight: bold;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: var(--mid-color);
  color: var(--dkest-color);
  font-size: 12px;
}

/* Navigation buttons */
.nav-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 50px;
  margin: 0 auto;
  justify-content: space-evenly;
  margin-top: 5px;
}

button {
  width: 190px;
  height: 35px;
  background: linear-gradient(to bottom, white, #fff9cc); /* white to light yellow */
  color: var(--dkest-color);
  font-weight: bold;
  border: none;
  margin-top: 5px;
  margin-right: 5px;
  border-radius: 10px; /* rounded corners */
  cursor: pointer;
  transition: background 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button:hover {
  background: linear-gradient(to bottom, #fff9cc, white); /* reverse gradient on hover */
}

button a {
  color: var(--accent);
  font-weight: bold;
  text-decoration: none;
}

p {
  padding: 5px;
}

p a {
  color: var(--dkest-color);
  font-weight: bold;
}

/* Scrollbar styling */
.scroll::-webkit-scrollbar-track {
  background-color: var(--lt-color);
}

.scroll::-webkit-scrollbar {
  width: 10px;
  background-color: #f2b1a4;
}

.scroll::-webkit-scrollbar-thumb {
  background-color: var(--dk-color);
}

/* Footer */
#footer {
  text-align: center;
  padding-top: 5px;
  margin-bottom: 5px;
}

#footer p {
  background-color: white;
  display: block;
  width: 160px;
  margin: 0 auto;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px;
}

/* Textarea */
textarea {
  background-color: var(--dkest-color);
  color: var(--lt-color);
  font-size: 10px;
}

/* Responsive adjustments */
@media only screen and (max-width: 860px) {
  html,
  body {
    overflow: visible;
  }
  #header {
    width: 97.6%;
  }
  #container {
    width: 100%;
  }
  .box-one,
  .box-two,
  .box-three,
  .box-four,
  .box-five,
  .box-six {
    width: 100%;
  }
  .box-two {
    order: 1;
  }
  .box-one {
    order: 2;
  }
  .box-three {
    width: 98%;
  }
  .three-boxes {
    width: 98%;
  }
  .two-boxes {
    width: 100%;
  }
  .wrapper {
    width: 100%;
  }
}

/* --- NEW: background image in .box-one content with overlay text --- */

.box-one .content.heading-box {
  position: relative;
  width: 418px;
  height: 200px;
  background-image: url('girlsinroom.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  padding: 0;
}

/* Hide any img inside box-one .content */
.box-one .content img {
  display: none;
}

/* Overlay text styling */
.overlay-text {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-family: 'Pinyon Script', cursive;
  font-style: italic;
  font-weight: bold;
  font-size: 35px;
  color: white;
  text-shadow:
    0 0 5px pink,
    0 0 10px pink,
    0 0 15px red;
  pointer-events: none;
  user-select: none;
}

/* Your existing :root and other styles remain unchanged */

/* Add this at the end of your CSS or just after the html, body styles */

html,
body {
  margin: 0;
  padding-top: 25px;
  padding: 0;
  height: 100%;
  font-family: Verdana;
  font-size: 11px;
  background-image: url('background.jpg');
  background-repeat: repeat;
  color: var(--dkest-color);
  padding: 1px;
  overflow-y: auto;
  position: relative;  /* Needed for overlay positioning */
  z-index: 0;
}

/* White translucent overlay to fade the background image */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0.35;       /* Adjust opacity to control fade strength */
  pointer-events: none; /* Allows clicks through the overlay */
  z-index: -1;          /* Put behind page content */
}