.drawing-caption {
    font-family: Georgia, serif;
    font-size: 12px;
    max-width: 200px;        /* limit width so it doesn’t stretch too far */
    padding: 4px 6px;
    border-radius: 4px;
    line-height: 1.25;
    word-break: break-word;
    user-select: none;
}

/* Left / right layout tweaks */
.drawing-item-wrapper.left,
.drawing-item-wrapper.right {
    display: flex;
    align-items: center;     /* vertically center caption and image */
    gap: 8px;                /* space between caption and image */
}

/* Reverse order for 'right' captions */
.drawing-item-wrapper.right .drawing-caption {
    order: 1;                /* ensures caption is after image */
}

/* Image sizing for left/right captions */
.drawing-item-wrapper.left img,
.drawing-item-wrapper.right img {
    max-width: 300px;        /* prevents image from being too wide */
    height: auto;
    display: block;
}

/* Hidden: literally invisible */
.drawing-caption.hidden {
    display: none;
}

/* Text box: simple overlay box */
.drawing-caption.text-box {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
}

.drawing-caption.sticky-note {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%; /* 👈 key */
    color: #000;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    padding: 1rem 1.2rem;
    max-width: 400px;
    min-width: 120px;
    min-height: 80px;
    box-sizing: border-box;
    white-space: normal;
}
/* Blue cats */
.sticky-note.bluecat {
    background-image: url('/assets/journal/stickynote/catsblue.jpg');
    color: #1b2a4a;
}

/* Piano cat */
.sticky-note.pianocat {
    background-image: url('/assets/journal/stickynote/pianocat.jpg');
    color: #222;
}

/* Panda */
.sticky-note.pink-seal {
    background-image: url('/assets/journal/stickynote/seal-stickies.jpg');
    color: #2a2a2a;
}

.sticky-note.pianocat2 {
    background-image: url('/assets/journal/stickynote/pianocat2.jpg') !important;
    color: #2a2a2a;
}

.sticky-note.catsblack {
    background-image: url('/assets/journal/stickynote/littlecats-black.jpg') !important;
    color: #2a2a2a;
}


.sticky-note.clover {
    background-image: url('/assets/journal/stickynote/clover.jpg') !important;
    color: #2a2a2a;
}

.sticky-note.clover {
    background-image: url('/assets/journal/stickynote/clover.jpg') !important;
    color: #2a2a2a;
}

.sticky-note.cloud {
    background-image: url('/assets/journal/stickynote/cloud.jpg') !important;
    color: #2a2a2a;
}

.sticky-note.glaceon-stickynote {
    background-image: url('/assets/journal/stickynote/glaceon-stickynote.png') !important;
    color: #2a2a2a;
}








.decoration {
  pointer-events: none;
}

.sticker {
  opacity: 0.85;
}

.decor-rainbowmusicnotes { background: url('/assets/journal/decor/rainbowmusicnotes.png') center/contain no-repeat; }
.decor-musicrainbow { background: url('/assets/journal/decor/musicrainbow.png') center/contain no-repeat; }
.decor-starmusicplaid { background: url('/assets/journal/decor/starmusicplaid.png') center/contain no-repeat; }
.decor-fishie { background: url('/assets/journal/decor/fishie.png') center/contain no-repeat; }
.decor-pinkscribble{ background: url('/assets/journal/decor/pinkscribbe.png') center/contain no-repeat; }
.decor-plaidheartpatch { background: url('/assets/journal/decor/plaidheartpatch.png') center/contain no-repeat; }
.decor-blackpolkadotbow { background: url('/assets/journal/decor/blackpolkadotbow.png') center/contain no-repeat; }
.decor-whitebow { background: url('/assets/journal/decor/whitebow.png') center/contain no-repeat; }
.decor-starglitter { background: url('/assets/journal/decor/starglitter.png') center/contain no-repeat; }
.decor-darktealheart { background: url('/assets/journal/decor/darktealheart.png') center/contain no-repeat; }
.decor-polkapaws { background: url('/assets/journal/decor/polkapaws.png') center/contain no-repeat; }
.decor-asciistars { background: url('/assets/journal/decor/asciistars.png') center/contain no-repeat; }
.decor-tealspiral { background: url('/assets/journal/decor/tealspiral.png') center/contain no-repeat; }





.button {
  position: absolute;

}

.btn-star   { background: url('/assets/journal/decor/starbutton.png') center/contain no-repeat; }
.btn-star2   { background: url('/assets/journal/decor/starbutton2.png') center/contain no-repeat; }
.btn-lightblue   { background: url('/assets/journal/decor/bluebutton.png') center/contain no-repeat; }
.btn-tealblue  { background: url('/assets/journal/decor/tealbutton.png') center/contain no-repeat; }
.btn-hotpink   { background: url('/assets/journal/decor/hotpinkbutton.png') center/contain no-repeat; }
.btn-lightpink   { background: url('/assets/journal/decor/lightpinkbutton.png') center/contain no-repeat; }
.btn-darkteal  { background: url('/assets/journal/decor/darktealbutton.png') center/contain no-repeat; }

/* Base page background styling */
.page-background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10; /* behind everything */
    background-size: cover;       /* or contain */
    background-position: center;  /* THIS goes here */
    background-repeat: no-repeat;
}

.bg-pinkspiral { width: 50%; height: 100%;  background-image: url('/assets/journal/decor/pinkspiral.png'); }
.bg-pawprints { width: 50%; height: 100%;  background-image: url('/assets/journal/decor/pawprints.png'); }
.bg-puppy { width: 50%; height: 100%;  background-image: url('/assets/journal/decor/puppy.png'); }

.bg-bluelacetrim { width: 100%; height: 50%; background-image: url('/assets/journal/decor/bluelacetrim.png'); }
.bg-bluetrim { width: 100%; height: 50%; background-image: url('/assets/journal/decor/bluetrim.png'); }
.bg-musicrainbow { width: 100%; height: 50%; background-image: url('/assets/journal/decor/musicrainbow.png'); }
.bg-puppy2 { width: 100%; height: 50%; background-image: url('/assets/journal/decor/puppy2.png'); }
.bg-catnotes { width: 100%; height: 50%; background-image: url('/assets/journal/decor/catnotes.png'); }

.bg-catscribbles { width: 100%; height: 100%; background-image: url('/assets/journal/decor/catscribbles.png'); }
.bg-rumpledpink { width: 90%; height: 80%; background-image: url('/assets/journal/decor/rumpledpink.png'); }
.bg-pastelpatchwork { width: 100%; height: 100%; background-image: url('/assets/journal/decor/pastelpatchwork.jpg'); }
.bg-blackpolkadots { width: 90%; height: 90%; background-image: url('/assets/journal/decor/blackpolkadots.jpg') }
.bg-tealhknote { width: 100%; height: 100%; background-image: url('/assets/journal/decor/tealhknote.jpg') }
.bg-softmusic { width: 70%; height: 100%; background-image: url('/assets/journal/decor/softmusic.png') }


a,
button,
[onclick],
[role="button"],
.tab,
.page-btn,
.prev,
.next {
  cursor: url('/assets/cursors/catpointer.cur') 0 0, pointer !important;
}


a,
button,
[onclick],
.journal-item,
.drawing-item,
.album-card,
.paper-contianer,
.discography-item,
.polaroid {
  cursor: url('/assets/cursors/catpointer.cur') 0 0, pointer !important;
}

.paper-container.discography-paper {
  cursor: url('/assets/cursors/catpointer.cur') 0 0, pointer !important;
}

.lyrics-btn,
.discord-button,
.socials-row.img,
.tag-btn,
.right-about-content.email,
.pointer-gif,
.center-button,
.single-card,
.paper-container,
.paper-container * {
  cursor: url('/assets/cursors/catpointer.cur') 0 0, pointer !important;
}


*:where(a, button, [role="button"], [onclick], input[type="submit"]) {
  cursor: url('/assets/cursors/catpointer.cur') 0 0, pointer !important;
}


#volumeSlider {
  cursor: url('/assets/cursors/catpointer.cur') 0 0, pointer !important;
}

#volumeSlider::-webkit-slider-thumb {
  cursor: url('/assets/cursors/catpointer.cur') 0 0, pointer !important;
}

#volumeSlider::-webkit-slider-runnable-track {
  cursor: url('/assets/cursors/catpointer.cur') 0 0, pointer !important;
}