body {
      background: url(https://hojotoho.neocities.org/images/parchment-bg.jpg) repeat-x fixed;
      font-family: Papyrus, sans-serif;
      font-size: 11px;
      text-shadow: 0px 0px 1px #b3b3b3;
      color: #42416b;
      letter-spacing: 3px;
    }

   @font-face {
  font-family: "Trickster";
  src: url("/Trickster-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

.p1 {
  font-family: Copperplate, serif;
}

.p2 {
  font-family: Papyrus, sans-serif;
}

    #wrapper {
      margin: 0 auto;
      width: 850px;
    }

    #headerwrap {
      width: 850px;
      margin: 0 auto;
    }

    #header {
      background: #fef5e7;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      border: 1px solid #ebebeb;
      padding: 20px;
      text-align: center;
    }

    .banner-text {
      font-size: 60px;
      color: #c29161;
    }

    .banner nav a {
      font: 12px monospace;
      text-transform: uppercase;
      line-height: 20px;
      padding: 4px;
      letter-spacing: 2px;
      margin-right: 10px;
      color:#42416b;
      text-decoration: none;
    }

    .banner nav a:hover {
      letter-spacing: 4px;
      color: #666;
    }

    #maincontentwrap {
      display: flex;
      width: 850px;
      margin: 0 auto;
    }

    #leftcolumnwrap {
      width: 200px;
      flex-shrink: 0;
    }

    #leftcolumn {
      background: #fef5e7 ;
      border: 1px solid #ebebeb;
      padding: 5px;
    }

    #contentwrap {
      width: 650px;
    }

    #content {
      background: #fef5e7;
      border: 1px solid #d4bb1e;
      padding: 5px;
    }

    #footerwrap {
      width: 850px;
      margin: 2em auto 0;
      clear: both;
    }

    #footer {
      height: 40px;
      background: #FFF;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      line-height: 20px;
      border: 1px solid #ebebeb;
      text-align: center;
      padding: 10px;
    }

    .title {
      background: #ab1e2e;
      text-transform: uppercase;
      font: 10px monospace;
      letter-spacing: 3px;
      color: #fff;
      padding: 2px 0 2px 4px;
      margin-bottom: 4px;
    }

    .title2 {
      background: #42416b;
      text-transform: uppercase;
      letter-spacing: 3px;
      color: #fff;
      padding: 2px 0 2px 4px;
      margin-bottom: 4px;
      font-size: 13px;
    }

    a:link, a:visited, a:active {
      color: #666;
      text-decoration: none;
    }

    a:hover {
      color: #999;
    }

@font-face {
  font-family: "Trickster";
  src: url("/Trickster-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}



/* --- Base Styling --- */
body {
  background: url('images/parchment-bg.jpg') center center fixed;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: "Trickster", serif;
  font-size: 20px;
  color: #2c1c0d;
  margin: 0;
  padding: 2em 1em;
}


/* --- Typography Enhancements --- */
.banner-text {
  font-family: 'Trickster-Regular.woff2', ;
  color: #3b2c13;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6);
  font-size: 2em;
  margin-bottom: 0.3em;
}
.banner-float {
  position: absolute;
  top: 0;
  right: -80px; /* adjust this value for how far into the margin it goes */
  width: 160px; /* adjust for scale */
  transform: rotate(-4deg); /* give it a bit of a natural tilt */
  opacity: 0.9;
  z-index: 2;
  pointer-events: none;
}


.banner-overlay {
  position: absolute;
  top: 100px;        /* adjust how high it floats */
  left: -40px;       /* hangs into left column */
  width: 150px;      /* scale as needed */
  z-index: 10;        /* behind text */
  pointer-events: none; /* so it doesn't interfere with clicks */
}

/* --- Navigation --- */
.banner nav {
  margin-top: 0.5em;
}
.banner nav a {
  margin: 0 1em;
  text-decoration: none;
  color: #5a4336;
  font-size: 1.2em;
  transition: color 0.2s;
}
.banner nav a:hover {
  color: #000;
  cursor: url("images/manicule-cursor.png") 8 0, pointer;
}

/* --- Header Banner --- */
.banner {
  position: relative;
  z-index: 1;
  width: 100%;
  background: linear-gradient(135deg, #f6e27a, #d4af37 40%, #fff8c9 60%, #bfa335);
  background-size: 200% 200%;
  animation: shimmer 8s ease-in-out infinite;
  padding: 1em 0 0.5em 0;
  z-index: 10;
  text-align: center;
  pointer-events: auto;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
  border-bottom: 2px solid #aa8d2f;
}

/* --- Containers --- */
.container {
  --borderwidth: 60px;
  border: var(--borderwidth) solid transparent;
  border-image-source: url('images/border3.jpg');
  border-image-slice: 84;
  border-image-repeat: none;
  border-image-outset: 1;
  position: relative;
  z-index: 1;
  background: #fff;
  margin: var(--borderwidth);
}
.containercontent {
  margin: calc(0px - var(--borderwidth));
  padding: 1em;
}

/* --- Sidebar --- */
.sidebar {
  width: 220px;
  padding: 2em;
  background-color: #fffae6;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  height: 100vh;
}

/* --- Logo --- */
.logo {
  font-size: 1.8em;
  margin-bottom: 1em;
}

/* --- Navigation List --- */
nav ul {
  list-style: none;
  padding: 0;
}
nav li {
  margin: 1em 0;
}
nav a {
  text-decoration: none;
  color: #5a4336;
  font-size: 1.2em;
  transition: color 0.2s;
}
nav a:hover {
  color: #000;
  cursor: url("images/manicule-cursor.png") 8 0, pointer;
}

/* --- Content --- */
.content {
  flex: 1;
  padding: 2em;
  position: relative;
}
.post {
  background: #fff;
  border: 1px solid #ddd;
  padding: 1.5em;
  margin-bottom: 2em;
  position: relative;
}

/* --- Decorated Container --- */
.decorated-container {
  --borderwidth: 84px;
  border: var(--borderwidth) solid transparent;
  border-image-source: url('images/border.jpg');
  border-image-slice: 84;
  border-image-repeat: round;
  border-image-outset: 1;
  background: #fff8e1;
  margin: 2em auto;
  max-width: 600px;
  position: relative;
}
.containercontent {
  margin: calc(0px - var(--borderwidth));
  padding: 2em;
  background-color: rgba(255, 255, 255, 0.9);
  position: relative;
  z-index: 1;
}

/* --- Washi Tape Styling --- */
.taped {
  position: relative;
}
.taped::before {
  background-image: url('images/washi-floral.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  content: " ";
  position: absolute;
  height: 50px;
  width: 150px;
  top: -20px;
  left: 40%;
  z-index: 5;
}
.cornertaped.taped::before {
  top: -30px;
  left: -30px;
  transform: rotate(-25deg);
}

/* --- Alternate Washi Images --- */
.taped:nth-of-type(3n)::before { background-image: url('YOURTAPE5.PNG'); left: 10%; }
.taped:nth-of-type(4n)::before { background-image: url('YOURTAPE2.PNG'); left: 20px; }
.taped:nth-of-type(5n)::before { background-image: url('YOURTAPE6.PNG'); left: 60%; }
.taped:nth-of-type(6n)::before { background-image: url('YOURTAPE2.PNG'); left: 20px; }
.taped:nth-of-type(7n)::before,
article.taped ~ div article.taped:first-of-type::before {
  background-image: url('YOURTAPE7.PNG');
  left: 30%;
}
.taped:nth-of-type(8n)::before {
  background-image: url('YOURTAPE3.PNG');
  left: 30%;
}
.taped:nth-of-type(odd)::before {
  background-image: url('YOURTAPE4.PNG');
  right: 20px;
}

/* --- Footer --- */
footer {
  text-align: center;
  margin-top: 2em;
  font-size: 1em;
  color: #888;
}

/* --- Animation --- */
@keyframes shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Floating Image --- */
.floating-image {
  position: absolute;
  top: 350px;
  right: 20px;
  width: 200px;
  transform: rotate(-2deg);
  z-index: 10;
  opacity: 0.9;
  pointer-events: none;
}

/* --- Main Content Area --- */
main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1em;
  text-align: center;
  background: rgba(255, 250, 235, 0.95);
  border: 2px solid #c2b280;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

/* --- Centered Container --- */
.main-container {
  max-width: 66.66%;
  margin: 0 auto 2em;
  text-align: center;
}

/* --- Scrollbox Section --- */
.scrollbox {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  max-width: 66.66%;
  margin: 2em auto;
  background: rgba(255, 250, 240, 0.92);
  padding: 1.5em;
  border: 2px solid #c2b280;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  max-height: 400px;
  text-align: left;
  line-height: 1.6;
  font-size: 1rem;
}
.scrollbox img {
  max-width: 100%;
  height: auto;
}
.scrollbox-image,
.floating-image {
  width: 200px;
}

/* --- Bookshelf Styling --- */
.bookshelf {
  position: relative;
  width: 600px;
  margin: 0 auto;
}
.shelf-bg {
  width: 100%;
  display: block;
}
.book {
  position: absolute;
  bottom: 30px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.book img {
  height: 120px;
  cursor: pointer;
}
.book:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  z-index: 2;
}