/* =========================
   FONTS
========================= */
@font-face {
    font-family: "Milky Coffee";
    src: url("https://whangam.neocities.org/font/Milky%20Coffee.otf") format("opentype");
}
@font-face {
    font-family: "AnimalCute";
    src: url("https://whangam.neocities.org/font/AnimalCute.otf") format("opentype");
}

/* =========================
   ROOT VARIABLES
========================= */
:root {
    --site-bg: radial-gradient(circle at 20% 30%,
        #f0f8ff 0%,
        #ffe0f7 25%,
        #f0fff5 50%,
        #e7e0ff 75%,
        #fef6e0 100%
    );

    --accent-color: #cba7ff;
    --link-color: #b48fff;
    --bg-color: #1a1028;
    --text-color: #caa0ff;
    --text-color2: #d8a8ff;
    --prose-color: #bfa8ff;
    --favorite-color: #8b6fcf;

    --bg-1: #fcefff;
    --bg-2: #e0f6ff;
    --bg-3: #fef0ff;
    --bg-4: #e8fff4;

    --paper-overlay: url('/images/layout/batthern.png');
}

/* =========================
   GLOBAL
========================= */
* {
    color: var(--text-color);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-shadow: none;
    scrollbar-color: var(--favorite-color) rgba(255,255,255,0.15);
    scrollbar-width: thin;
}

html {
    scroll-behavior: smooth;
    overflow-y: visible;
}

body {
    margin: 0;
    background: var(--bg-color);
    overflow-x: hidden;
    overflow-y: visible;
}

/* =========================
   BACKGROUND LAYERS
========================= */
#bg-aurora {
    position: fixed;
    inset: 0;
    background: linear-gradient(
        135deg,
        var(--bg-1),
        var(--bg-2),
        var(--bg-3),
        var(--bg-4)
    );
    background-size: 400% 400%;
    animation: aurora 20s ease infinite;
    z-index: 0;
}

#bg-paper {
    position: fixed;
    inset: 0;
    background-image: var(--paper-overlay);
    background-repeat: repeat;
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
}

/* Snow layer */
#snow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

/* =========================
   SNOWFLAKES
========================= */
.snowflake {
    position: absolute;
    top: -10vh;
    border-radius: 50%;
    background: rgba(255,230,245,0.6);
    box-shadow: 0 0 6px rgba(255,200,230,0.5);
    animation-name: fall, drift, twinkle;
    animation-iteration-count: infinite;
    animation-timing-function: linear, ease-in-out, ease-in-out;
}

@keyframes fall { from { top: -10vh; } to { top: 110vh; } }
@keyframes drift { from { transform: translateX(-40px); } to { transform: translateX(40px); } }
@keyframes twinkle { 0%,100% { opacity: 0.6; } 50% { opacity: 0.3; } }

/* =========================
   LAYOUT
========================= */
#content {
    display: flex;
    flex-wrap: wrap; /* ADDED: allows responsive stacking (mobile.css will refine) */
    max-width: 960px;
    margin: auto;
    position: relative;
    z-index: 5;
  align-items: stretch; /* makes sidebar match main height */

}

/* =========================
   SIDEBAR
========================= */
#sidebar {
    background-color: rgba(255,245,255,0.08);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(203,167,255,0.4);
    min-width: 220px;
    flex: 0 0 220px;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(203,167,255,0.2);
}

/* Avatar */
#avatar {
    margin: 1em auto;
    max-width: 164px;
    max-height: 164px;
    text-align: center; /* ADDED: ensures avatar stays centered */
}
#avatar img { max-width: 160px; outline: none; }

/* Bio */
#bio {
    font-size: 0.85rem;
    margin: 1em;
    padding: 0.8em;
    background-color: rgba(255,245,255,0.08);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(203,167,255,0.5);
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(203,167,255,0.3);
    line-height: 1.4em;
}

#bio p {
    color: rgba(218,160,255,0.8);
    margin: 0.3em 0;
    font-size: 0.85rem;
    font-style: italic;
}

/* =========================
   MAIN CONTENT
========================= */
main {
    background-color: rgba(255,245,255,0.08);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(203,167,255,0.4);
    border-radius: 8px;

    flex: 1;
    margin: 0;

    height: 600px;      /* CHANGED: stable scroll height */
    overflow-y: auto;   /* CHANGED: vertical scroll only */

    position: relative;
    z-index: 5;
}

/* =========================
   HEADINGS
========================= */
main h1, main h2, main h3, main h4, main h5, main h6 {
    margin: 1.2em 0 0.6em;
    font-family: "Milky Coffee", serif;
    font-weight: normal;
    color: var(--text-color2);
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
}

/* =========================
   PROSE
========================= */
.prose-bg {
    background: rgba(255,245,255,0.08);
    backdrop-filter: blur(4px);
    padding: 1.5em;
    border-radius: 8px;

    /* REMOVED: caused stretching + layout break */
    /* min-height: 100%; */

    color: var(--prose-color);
    margin: 0;
    box-sizing: border-box;
}

.prose-bg p, .prose-bg li, .prose-bg span {
    color: var(--prose-color);
}

.prose {
    margin: 0;
    padding: 1em;
    line-height: 1.6em;
}

/* =========================
   LINKS
========================= */
main a {
    color: var(--prose-color);
    text-decoration-line: underline;
    text-decoration-style: wavy;
    transition: color 150ms ease;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration-thickness: 1.5px;
}
main a:visited { color: var(--link-color); }
main a:hover { color: #000; }
main a:active { color: var(--link-color); }

/* =========================
   FOOTER
========================= */
footer {
    text-align: center;
    font-size: small;
    padding: 1em;
    position: relative;
    z-index: 5;
}

/* =========================
   CUSTOM CURSOR
========================= */
* { cursor: url(https://cur.cursors-4u.net/food/foo-6/foo514.cur), auto !important; }

/* =========================
   ANIMATIONS
========================= */
@keyframes aurora {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}