/* Faded Red Hand Blue Bow Heart - https://www.cursors-4u.com/cursor/red-hand-blue-bow-heart */
* {
  cursor: url('https://cdn.cursors-4u.net/previews/faded-red-hand-blue-bow-heart-7951c4c7-32.webp') 35 32, auto !important;
}
/* End www.Cursors-4U.com Code */

/* --- SPRING AESTHETICS --- */
        body {
            background-color: #e8f5e9; 
            background-image: url(images/bg.png);
            color: #3e3328;
            font-family: 'ms ui gothic', sans-serif;
            margin: 0;
            padding: 30px 15px;
        }

        .garden-box {
            max-width: 900px;
            margin: 0 auto;
            background-color: #fffafa; /* Snow White / Pale Pink Tint */
            border-width: 9px;
    border-style: solid;
    border-image: url("https://i.imgur.com/ROjUrNz.gif") 6 round;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-clip: padding-box;
            padding: 25px;
            box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
        }

        header {
            text-align: center;
            margin-bottom: 25px;
        }

        h1 {
            
            font-size: 2.8em;
            font: 32px pixelpoiiz;
	        letter-spacing: -1px;
	        text-align: center;
	        color: #FE9CD7;
	        text-shadow: 0px 1px 1px #aaa;
	        margin: 0 0 0;
            padding-bottom: 10px;
        }

        .marquee-container {
            background: #fce4ec;
            border-top: 1px dotted #bbb;
            border-bottom: 1px dotted #bbb;
            padding: 5px;
            color: #880e4f;
            font-weight: bold;
        }

        .layout {
            display: flex;
            gap: 25px;
        }

        .sidebar {
            width: 280px;
            flex-shrink: 0;
        }

        .panel {
            border: 1px solid #f8bbd0;
            
            padding: 15px;
            margin-bottom: 20px;
        }

        .panel h3 {
            margin-top: 0;
            color: #FE9CD7;
            padding-bottom: 5px;
            margin: 0 0 15px 0;
            font: 24px pixelpoiiz;
	        letter-spacing: -1px;
	        text-align: left;
	        text-shadow: 0px 1px 1px #aaa;
	        border-bottom: 1px dotted #bbb;
        }

        ul.tree-links {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        ul.tree-links li {
            margin-bottom: 8px;
        }

        ul.tree-links li::before {
            content: url(images/before.gif); /* icon before; pcik*/
            margin-right: 6px;
        }


        ::selection {
            color: #58E4FC;
        }

        a:visited {
            color: #FE9CD7; /* Changes text color of visited links */
        }

        a:hover {
            font-style: italic;
		    text-decoration: underline wavy;
        }

        
        /* Selected blog post in the sidebar */
        .tree-links a.active-post {
            background-color: #EA90C6;
            color: #ffffff;
            padding: 2px 5px;
            border-radius: 3px;
        }

        /* Keep the selected style when hovering */
        .tree-links a.active-post:hover {
        background-color: #EA90C6;
        color: #ffffff;
        }


        a {
            color: #453357; /* Forest Green for links */
            text-decoration: none;
            font-weight: bold;
            transition: 0.2s;
        }

        a:hover {
            background-color: #EA90C6;
            color: #ffffff;
            padding: 0 4px;
            border-radius: 3px;
        }

        /* --- THE DRAGON PET ENCLOSURE --- */
        .pet-zone {
            background-color: #c8e6c9; /* Light spring green enclosure */
            border: 3px inset #81c784;
            padding: 15px;
            text-align: center;
            
        }

        .pet-title {
            font-weight: bold;
            color: #1b5e20;
            margin-bottom: 10px;
            font-size: 0.9em;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* --- EMBEDDED DRAGON CSS --- */
        #nd-box { position: relative; width: 100%; height: 200px; margin: 0 auto; z-index: 10; cursor: grab; user-select: none; touch-action: none; border: 1px solid transparent; transition: border 0.2s; }
        #nd-box:hover { border: 1px dashed rgba(0,0,0,0.2); }
        #nd-box:active { cursor: grabbing; }
        #nd-svg { width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0px 15px 15px rgba(0,0,0,0.15)); }
        #nd-resize-handle { position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, #f06292 50%); border-bottom-right-radius: 4px; opacity: 0; transition: opacity 0.2s; }
        #nd-box:hover #nd-resize-handle { opacity: 1; }
        @keyframes nd-sway-left { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(12deg); } }
        @keyframes nd-sway-right { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-12deg); } }
        .nd-anim-leaf-l { transform-origin: 0 0; animation: nd-sway-left 3s infinite ease-in-out; }
        .nd-anim-leaf-r { transform-origin: 0 0; animation: nd-sway-right 3.2s infinite ease-in-out; }

        .journal {
            flex-grow: 1;
        }

        .entry {
            background: #ffffff;
            border: 1px solid #f8bbd0;
            padding: 20px;
            margin-bottom: 25px;
            border-left: 5px solid #F8BBD0; /* Sprout green border */
        }

        .entry-date {
            
            font-style: italic;
            font-size: 0.9em;
            display: block;
            margin-bottom: 5px;
        }

        .entry h2 {
            margin: 0 0 15px 0;
            font: 24px pixelpoiiz;
	        letter-spacing: -1px;
	        text-align: left;
	        color: #FE9CD7;
	        text-shadow: 0px 1px 1px #aaa;
	        border-bottom: 1px dotted #bbb;
        }

        .entry p {
            line-height: 1.6;
            margin-bottom: 15px;
        }

        footer {
            text-align: center;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 2px dashed #f06292;
            color: #f06292;
            font-size: 0.85em;
        }

        @media (max-width: 750px) {
            .layout { flex-direction: column; }
            .sidebar { width: auto; }
        }




/***my fav pixel font***/
@font-face {
    font-family: 'pixelpoiiz';
    src: url('fonts/pixelpoiiz.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --- GARDEN NOTES SIDEBAR BOX --- */

.garden-notes {
    background: #fff5fa;
    border: 1px dashed #f4a8ce;
}

.garden-notes .garden-note {
    padding: 8px 0;
    border-bottom: 1px dotted #e9c4d6;
}

.garden-notes .garden-note:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.garden-notes .note-label {
    display: block;
    color: #d66ba7;
    font-weight: bold;
    font-size: 0.85em;
    margin-bottom: 4px;
}

.garden-notes .garden-note p {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.5;
}

/*status*/

#statuscafe {
    padding: .5em;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

/* --- DECORATED  HEADER --- */

.garden-header {
    margin-bottom: 25px;
    text-align: center;
}

.header-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 5px;
}

.header-title h1 {
    flex-shrink: 1;
}

.title-deco {
    width: 45px;
    height: auto;
    object-fit: contain;
}

/* Small subtitle below the heading */
.header-subtitle {
    color: #b879a0;
    font-size: 12px;
    letter-spacing: 1px;
    margin: 5px 0 12px;
}

/* Decorative strip beneath the subtitle */
.header-garden {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
    border-top: 1px dotted #e8b4d0;
    border-bottom: 1px dotted #e8b4d0;
    background: #fff5fa;
}

.header-garden img {
    width: auto;
    height: 28px;
    max-width: 60px;
    object-fit: contain;
}

/* Smaller decorations on phones */
@media (max-width: 480px) {
    .header-title {
        gap: 5px;
    }

    .title-deco {
        width: 25px;
    }

    .header-garden {
        gap: 8px;
    }

    .header-garden img {
        max-height: 22px;
        max-width: 40px;
    }
}



.garden-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 20px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px dashed #f06292;
}

.footer-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    white-space: nowrap;
}

.garden-footer .note-label {
    display: inline-block;
    color: #d66ba7;
    font-weight: bold;
    font-size: 0.85em;
    white-space: nowrap;
}


/* Keep each footer section on one line */
.footer-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    white-space: nowrap;
}

/* Keep multiple buttons side by side */
.footer-row a {
    display: inline-flex;
    flex-shrink: 0;
}

.footer-row a img {
    display: block;
    width: 88px;
    height: 31px;
    object-fit: contain;
}