/* ========= THEME VARIABLES ========= */
:root {
  --accent-light: #fb90b6;
  --accent-dark: #c9507a;
  --accent-muted: #afafaf;
}

/* ========= STICKERS ========= */
.sticker {
  position: absolute;
  pointer-events: none; /* don't block clicks/scroll */
}

.s-stickynote { left: 13vw; top: 2vh; z-index: 3; }
.s-sh_ost { right: 20vw; top: -10vh; z-index: 3; }
.s-sh_gameboy { right: 20vw; bottom: -0vh; z-index: 3; }
.s-sh_psp { left: 12vw; bottom: 2vh; z-index: 3; }
.s-sh_windows { right: -8vw; bottom: 15vh; z-index: 3; }
.s-sh_wheel { left: -10vw; bottom: 15vh; z-index: 3; }
.s-sh_wheelBlank { left: -15vw; top: 20vh; z-index: 3; }

/* ========= BASE ========= */
html, body {
  margin: 0;
  font-family: Verdana, sans-serif;
  font-size: 10px;
  background-color: pink;
  background-image: url("https://maia-likes-zombies.neocities.org/submenu4/shadowhearts/assets/pinkSeamless.jpg");
  background-repeat: repeat;
}

strong { color: var(--accent-dark); }
em     { color: var(--accent-light); }
u      { color: var(--accent-dark); }

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

.wrapper { padding: 20px; }

/* ========= NOTEBOOK CANVAS ========= */
.container {
  position: relative;
  max-width: 900px;
  height: 770px; /* fixed height to match art */
  margin: 0 auto;

  /* Background notebook art */
  background-image: url("https://maia-likes-zombies.neocities.org/submenu4/shadowhearts/assets/pink_notebook2.png");
  background-repeat: no-repeat;
  background-position: top left;
  /* If you need to scale the art, uncomment:
  background-size: contain;
  */
  z-index: 0; /* base layer */
}

/* All positioned papers */
.post-it,
.white-box,
.notebook,
.yellow-note {
  position: absolute;
}

/* Sticky note (top-left) */
.post-it {
  top: 20px;
  left: 40px;
  width: 130px;
  z-index: 2;
}

/* White ribbon bar */
.white-box {
  top: 20px;
  left: 180px;
  width: 500px;
  height: 100px;
  overflow: hidden;
  z-index: 2;
}

/* Notebook body (left page content) */
.notebook {
  top: 20px;
  left: 70px;
  z-index: 2; /* above notebook background */
}

/* ✅ The scrollable writing area INSIDE the notebook */
/*    This is where we add the translucent white wash for readability */
.notebook > .wrapper {
  overflow: auto;
  height: 450px;
  width: 380px;
  padding-right: 84px; /* space for spiral/binding margin */

  /* Firefox scrollbar styling */
  scrollbar-width: thin; /* "auto" or "thin" */
  scrollbar-color: #000 #c4c4c4; /* thumb track */

  /* === Option 3: Soften lines under text ONLY in the writing area === */
  background: rgba(255, 255, 255, 0.65); /* 🔧 Adjust 0.55–0.75 */
  border-radius: 6px;                     /* optional, paper inset vibe */
  z-index: 2; /* ensure above background art but below stickers */

  /* Optional frosted-paper effect (supported in Safari/Chromium) */
  /* backdrop-filter: blur(2px);
     -webkit-backdrop-filter: blur(2px); */
}

/* Paragraph spacing/line-height in the writing area */
.notebook > .wrapper p {
  line-height: 16.2px;     /* consider 1.45–1.55 if you want looser lines */
  margin-bottom: 16.5px;
}

/* You can alternatively increase readability with: */
/* .notebook > .wrapper p { line-height: 1.5; } */

/* Yellow side note / nav panel (right column) */
.yellow-note {
  left: 550px;
  bottom: 500px;
  width: 180px;
  height: 550px;
  overflow: auto;

  /* Firefox scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: #e8d866 #d6ca71;

  z-index: 2;
}

/* Wash behind the sidebar content */
.yellow-note > .wrapper {
  /* keep your existing padding from .wrapper */
  background: rgba(255, 255, 255, 0.65); /* tweak 0.55–0.75 to taste */
  border-radius: 6px;                    /* optional cute rounding */
  /* Optional: frosted-paper look (supported in Safari/Chromium) */
  /* backdrop-filter: blur(2px);
     -webkit-backdrop-filter: blur(2px); */
}

/*a subtle inset border for a panel feel */
.yellow-note > .wrapper {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}

/* Titles */
.title {
  font-size: 35px;
  font-weight: bold;
  letter-spacing: 1px;
  border-bottom: 3px dotted var(--accent-muted);
  color: var(--accent-dark);
  margin-top: 0px;
  margin-left: 0px;

}

.subtitle {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  border-bottom: 3px dotted var(--accent-muted);
  margin-bottom: 10px;
  color: var(--accent-dark);
}

.page-title {
  font-size: 25px;
  padding-bottom: 4px;
  color: var(--accent-dark);
  font-weight: bold

}

ul.pixelbullets {
  list-style-image: url("https://sadgrl.online/images/lyts/not-mine/hearth_rosa.gif");
  padding-left: 25px;
}

.footer {
  text-align: center;
  margin: 12px 0 24px;
}

/* ========= WEBKIT SCROLLBARS ========= */
/* Right sidebar */
.yellow-note::-webkit-scrollbar {
  width: 12px;
}
.yellow-note::-webkit-scrollbar-track {
  background: #e8d866;
}
.yellow-note::-webkit-scrollbar-thumb {
  background-color: #d6ca71;
}

/* Notebook writing area */
.notebook > .wrapper::-webkit-scrollbar {
  width: 12px;
}
.notebook > .wrapper::-webkit-scrollbar-track {
  background: #c4c4c4;
}
.notebook > .wrapper::-webkit-scrollbar-thumb {
  background-color: #000;
}

/* Helper to highlight a placeholder note in your content */
.removeThis {
  background-color: yellow;
}

/* ===== (optional) improves anchor jumps in notebook ===== */
#day1, #day2, #day3, #day4 {
  scroll-margin-top: 8px; /* leaves breathing room under spiral */
}

/* ===== (optional) ensure .container content stacks above background ===== */
.container > * { position: relative; z-index: 2; }