/* --- Base & Reset --- */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            min-height: 100vh;
            background-image: url("../img/ui/bg/BunnyBg.jpg");
            background-size: 240px; 
            background-position: top left; 
            background-repeat: repeat; 
            font-family: 'Questrial', sans-serif;
            font-size: 16px;
            color: #532635;
            padding: 2rem 0; 
        }

        /* --- Typography & Links --- */
        h2.section-title {
            font-size: 20px;
            text-align: right;
            font-weight: normal;
            font-family: 'Love Ya Like A Sister', sans-serif;
            border-bottom: 2px dotted #5D1838;
            margin-bottom: 0.5rem;
        }

        a { text-decoration: none; color: #903643; }
        a:visited { color: #903643; }
        a:hover { font-style: italic; }
        a:active { font-style: italic; font-weight: bold; }

        /* --- Main Layout --- */
        .container {
            display: flex;
            flex-direction: row;
            gap: 1rem;
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Left Side (Main Character Art) */
        .profile-art {
            display: flex;
            flex-grow: 2;
            flex-basis: 0;
        }

        .profile-art img {
            align-self: center;
            width: 100%;
            min-width: 200px;
            object-fit: cover;
        }

        /* Right Side (Content Feed) */
        .content-feed {
            display: flex;
            flex-direction: column;
            flex-grow: 3;
            flex-basis: 0;
            justify-content: space-between;
            gap: 1rem;
        }

        /* --- Individual Content Boxes --- */
        .content-box {
            display: flex;
            gap: 1rem;
        }

        .box-decoration-img {
            align-self: center;
            width: 200px;
        }

        .text-panel {
            flex-grow: 6;
            flex-basis: 0;
            min-width: 220px;
            height: 220px;
            border: 2px solid #5D1838;
            padding: 1rem;
            background-color: rgba(188, 143, 143, 0.6);
            
            /* Text & Scroll Formatting */
            overflow-y: auto;
            overflow-x: hidden;
            text-align: justify;
            line-height: 1.1;
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
        }

        .text-panel.center-text {
            text-align: center;
        }

        .text-panel img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 5px auto;
        }

        /* --- Quizzes List Formatting --- */
        .quiz-list {
            list-style: none; /* Removes bullet points */
            display: flex;
            flex-direction: column;
            gap: 15px; /* Adds space between each quiz */
        }

        /* --- Custom Scrollbar --- */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background-color: transparent; }
        ::-webkit-scrollbar-thumb { background-color: #5D1838; }

        /* --- Footer Credit --- */
        #credit {
            font-size: 12px;
            position: fixed;
            bottom: 5px;
            right: 5px;
        }

        /* --- Responsive Design (Mobile) --- */
        @media (max-width: 730px) {
            .box-decoration-img {
                display: none;
            }
        }

        @media (max-width: 515px) {
            .container {
                flex-direction: column;
            }
            .profile-art img {
                width: 40%;
                min-width: 40%;
                margin: 0 auto;
            }
        }