/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
HTML content. To learn how to do something, just try searching Google for questions like
"how to change link color." */

/* Base Styles */
:root {
	    --pink: #9a7575;            /* Darker, muted rose */
    --light-pink: #b08e8e;      /* Muted mauve */
    --blue: #6a8d99;            /* Muted slate blue */
    --green: #7a917f;           /* Muted sage */
    --brown: #8f7d68;           /* Darker taupe */
    --gold: #a39770;            /* Muted antique gold */
    --cream: #e8e1d4;           /* Softer cream/eggshell */
    --dark-text: #2a2424;       /* Darker charcoal */
    --light-text: #bcbccc;      /* Muted lavender-gray */
    --glaucous: #4d8585;        /* Darker teal */
    --highlight: rgba(154, 117, 117, 0.25); /* Muted highlight */
    --bg-dark: rgba(42, 41, 50, 0.65);      /* Darker, more opaque background */
    --bg-light: rgba(232, 225, 212, 0.8);   /* Cream-based, less transparent */
    --border-radius: 0.25rem;   /* Keeping the same */
    --width: 46rem;             /* Keeping the same */
    --padding-horizontal: 2rem; /* Keeping the same */
    --padding-vertical: 2rem;   /* Keeping the same */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Lexend Giga', sans-serif;
    background-image: url('https://mokiverse.neocities.org/faebane/ui_images/faebane_bg.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    min-height: 100vh;
    color: var(--dark-text);
    line-height: 1.6;
    overflow-x: hidden;
}

#main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    position: relative;
    z-index: 1;
    padding: 0.5rem 1rem;
}

#main > .inner {
    max-width: 100%;
    position: relative;
    width: var(--width);
    z-index: 1;
    padding: 0.5rem var(--padding-horizontal);
}

/* Navigation Styles */
#navbut {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

#navbut li {
    list-style: none;
}

#navbut li a {
    display: inline-block;
    width: 9.625rem;
    height: 1.625rem;
    line-height: 1.625rem;
    padding: 0 0.40625rem;
    vertical-align: middle;
    text-transform: lowercase;
    font-family: 'Lexend Giga', sans-serif;
    letter-spacing: 0.075rem;
    padding-left: calc(0.075rem + 0.40625rem);
    font-size: 0.625em;
    font-weight: 400;
    border-radius: var(--border-radius);
    box-shadow: 0rem 0rem 0.125rem 0rem rgba(255, 255, 255, 0.102);
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.259);
    background-color: var(--bg-dark);
    color: var(--cream);
    backdrop-filter: blur(0.175rem);
}

#navbut li a:hover {
    background-color: var(--glaucous);
    color: white;
}

#navbut .n01 {
    background-color: var(--brown);
}

/* Container Styles */
.container {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-dark);
    backdrop-filter: blur(0.175rem);
    margin-bottom: 1.5rem;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.container > .wrapper {
    width: 100%;
}

.container > .wrapper > .inner {
    vertical-align: top;
    position: relative;
    max-width: 100%;
    border-radius: inherit;
    text-align: center;
    padding: 0.125rem;
}

/* Header Container */
#header-container {
    background-color: transparent;
    padding: 0;
    overflow: hidden;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
}

#header-container .wrapper {
    padding: 0;
}

#header-container .inner {
    padding: 0;
}

.header-image {
    width: 100%;
    height: 300px;
    background-image: url('https://mokiverse.neocities.org/faebane/ui_images/header1.png');
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.header-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.5));
}

.site-title {
    position: absolute;
    bottom: 1.5rem;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
    font-family: 'Eagle Lake', serif;
    font-size: 3.5rem;
    color: var(--cream);
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

.site-subtitle {
    position: absolute;
    bottom: 1rem;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
    font-size: 1.2rem;
    font-style: italic;
    color: var(--cream);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* Content Container */
.content-container {
    background-color: var(--bg-light);
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--pink);
}

.content-wrapper {
    padding: 2rem;
}

/* Text Styles */
.style1 {
    text-align: center;
    color: var(--dark-text);
    font-family: 'Lexend Giga', sans-serif;
    letter-spacing: 0.125rem;
    width: calc(100% + 0.125rem);
    font-size: 0.75em;
    line-height: 1.5;
    font-weight: 400;
    padding-left: 1rem;
    padding-right: 1rem;
}

.style1 .p {
    display: block;
    position: relative;
    margin-bottom: 1rem;
}

.style1 .p:nth-child(n + 2) {
    margin-top: 0.625rem;
}

.style1 strong {
    font-weight: 600;
    color: var(--glaucous);
}

.style1 em {
    font-style: italic;
    color: var(--dark-text);
}

.style1 mark {
    background-color: var(--highlight);
    padding: 0.125rem 0.25rem;
    border-radius: 0.125rem;
}

.section-title {
    font-family: 'Eagle Lake', serif;
    font-size: 2rem;
    color: var(--dark-text);
    margin-bottom: 1.5rem;
    text-align: center;
    position: relative;
    padding-bottom: 1rem;
}

.section-title::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--pink), transparent);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* Divider */
.divider {
    display: block;
    width: 100%;
    height: 20px;
    margin: 2rem 0;
    background-image: url('https://mokiverse.neocities.org/faebane/ui_images/divider.png'); /* This would be your ornate divider image */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* Footer Styles */
footer {
    text-align: center;
    padding: 2rem 0;
    font-size: 0.9rem;
    color: var(--dark-text);
    opacity: 0.7;
}

.back-to-top {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.back-to-top a {
    display: inline-block;
    width: 9.625rem;
    height: 1.625rem;
    line-height: 1.625rem;
    padding: 0 0.40625rem;
    vertical-align: middle;
    text-transform: lowercase;
    font-family: 'Lexend Giga', sans-serif;
    letter-spacing: 0.075rem;
    padding-left: calc(0.075rem + 0.40625rem);
    font-size: 0.625em;
    font-weight: 400;
    border-radius: var(--border-radius);
    box-shadow: 0rem 0rem 0.125rem 0rem rgba(255, 255, 255, 0.102);
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.259);
    background-color: var(--blue);
    color: var(--cream);
}

.back-to-top a:hover {
    background-color: var(--glaucous);
}

/* Decorative Elements */
.glaucous-glow {
    position: fixed;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(106, 181, 181, 0.2) 0%, rgba(106, 181, 181, 0) 70%);
    pointer-events: none;
    z-index: -1;
    animation: float 8s infinite ease-in-out;
}

.glow1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.glow2 {
    bottom: 30%;
    right: 15%;
    width: 300px;
    height: 300px;
    animation-delay: 2s;
}


/* Ornate Frame Style */
    .ornate-frame {
        position: relative;
        margin: 0.5rem auto 1.5rem; /* Reduced top margin from 1.5rem to 0.5rem */
        text-align: center;
        max-width: 80%;
    }
    
.ornate-frame .title-text {
    display: inline-block;
    font-family: 'Eagle Lake', serif;
    font-size: 1.2em;
    color: var(--dark-text);
    background-color: var(--bg-light);
    padding: 0.4rem 1.5rem; /* Slightly reduced vertical padding */
    position: relative;
    z-index: 2;
    letter-spacing: 0.125rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid var(--pink);
    border-radius: var(--border-radius);
}

.ornate-frame::before,
.ornate-frame::after {
    content: "✦"; /* You can replace this with any ornamental character */
    font-size: 1rem;
    color: var(--gold);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.ornate-frame::before {
    left: 10%;
}

.ornate-frame::after {
    right: 10%;
}

/* Responsive Adjustments */
@media (min-width: 768px) {
    .tech-flex {
        flex-direction: row;
        text-align: left;
    }
    
    .tech-content {
        text-align: left;
        padding-left: 1rem;
    }
    
    .tech-items {
        justify-content: flex-start;
    }
    
    .timeline::before {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .timeline-item {
        width: 50%;
        margin-left: 50%;
        flex-direction: row-reverse;
    }
    
    .timeline-item:nth-child(even) {
        margin-left: 0;
        margin-right: 50%;
        flex-direction: row;
    }
    
    .timeline-marker {
        margin-right: 0;
        margin-left: 1.5rem;
        left: -8px;
    }
    
    .timeline-item:nth-child(even) .timeline-marker {
        margin-left: 0;
        margin-right: 1.5rem;
        left: 8px;
    }
}


@keyframes float {
    0% { transform: translate(0, 0); }
    50% { transform: translate(10px, 15px); }
    100% { transform: translate(0, 0); }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    :root {
        --padding-horizontal: 1rem;
        --padding-vertical: 1.5rem;
    }
    #main > .inner {
        padding: 1rem;
    }
    .site-title {
        font-size: 2.5rem;
    }
    
    .site-subtitle {
        font-size: 1rem;
    }
    
    .header-image {
        height: 200px;
    }
    
    .content-wrapper {
        padding: 1.5rem 1rem;
    }
    
    #navbut li a {
        width: 8rem;
    }
    
    .style1 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .character-gallery ul {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .frame {
        width: 100px;
        height: 100px;
    }
}

/* Character Profile Styles - NEW VERSION */
.profile-container,
#character-profile-container {
    max-width: 1000px;
    margin: 2rem auto;
    background-color: var(--bg-light);
    border-radius: var(--border-radius);
    box-shadow: 0 0 30px rgba(106, 181, 181, 0.4);
    overflow: hidden;
}

/* Top section with portrait and basic info */
.character-top-section,
.character-profile-flex {
    display: flex;
    padding: 1.5rem;
    gap: 2rem;
}

/* Portrait */
.character-portrait,
.character-portrait-large {
    position: relative;
    flex: 0 0 280px;
    height: 400px;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.character-portrait img,
.character-portrait-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius);
    border: 3px solid var(--glaucous);
    transition: transform 0.3s ease;
}

.character-portrait:hover img,
.character-portrait-large:hover img {
    transform: scale(1.03);
}

.portrait-frame {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: 1px solid var(--pink);
    border-radius: calc(var(--border-radius) + 6px);
    pointer-events: none;
}

.portrait-glow {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to top, var(--glaucous), transparent);
    opacity: 0.3;
    pointer-events: none;
}

/* Character basic info */
.character-basic-info,
.character-info-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.character-name,
.character-name-stylized {
    font-family: 'Eagle Lake', serif;
    font-size: 2.5rem;
    color: var(--glaucous);
    text-shadow: 1px 1px 3px rgba(106, 181, 181, 0.3);
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}

.character-name::after,
.character-name-stylized::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--pink), transparent);
}

.character-epithet {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--dark-text);
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.character-quote {
    font-family: 'Georgia', serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--dark-text);
    background-color: rgba(232, 192, 192, 0.1);
    border-left: 3px solid var(--pink);
    padding: 0.75rem 1rem;
    margin-top: auto;
    font-style: italic;
    position: relative;
}

.character-quote::before {
    content: '"';
    position: absolute;
    left: -0.5rem;
    top: -0.5rem;
    font-size: 2rem;
    color: var(--pink);
    opacity: 0.5;
}

.character-quote::after {
    content: '"';
    position: absolute;
    right: 0.5rem;
    bottom: -1.5rem;
    font-size: 2rem;
    color: var(--pink);
    opacity: 0.5;
}

/* Character traits */
.character-traits {
    margin: 1rem 0 1.5rem;
}

.trait-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.character-trait {
    background-color: rgba(106, 181, 181, 0.1);
    border: 1px solid var(--glaucous);
    border-radius: 20px;
    padding: 0.3rem 1rem;
    font-size: 0.9rem;
    color: var(--dark-text);
    display: inline-block;
    font-weight: 500;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.character-trait:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
}

/* Detail sections with two columns */
.character-details {
    display: flex;
    padding: 1.5rem;
    gap: 2rem;
}

.detail-column {
    flex: 1;
}

.detail-section,
.profile-section {
    margin-bottom: 1.5rem;
}

.detail-heading,
.profile-heading {
    font-family: 'Eagle Lake', serif;
    font-size: 1.2rem;
    color: var(--dark-text);
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(232, 192, 192, 0.3);
    display: flex;
    align-items: center;
}

.detail-heading::before,
.profile-heading::before {
    content: '✦';
    margin-right: 0.5rem;
    color: var(--glaucous);
}

.detail-table,
.character-table {
    width: 100%;
    border-collapse: collapse;
}

.detail-table tr,
.character-table tr {
    border-bottom: 1px dotted rgba(232, 192, 192, 0.2);
}

.detail-table td,
.character-table td {
    padding: 0.5rem 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.detail-table td:first-child,
.character-table td:first-child {
    width: 40%;
}

/* Marked labels with gradient */
.detail-table mark,
.character-table mark {
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    color: var(--dark-text);
    display: inline-block;
    width: 100%;
}

/* Appearance marks (blue tones) */
.appearance-mark-1 { background-color: rgba(106, 181, 181, 0.1); }
.appearance-mark-2 { background-color: rgba(106, 181, 181, 0.15); }
.appearance-mark-3 { background-color: rgba(106, 181, 181, 0.2); }
.appearance-mark-4 { background-color: rgba(106, 181, 181, 0.25); }
.appearance-mark-5 { background-color: rgba(106, 181, 181, 0.3); }

/* Information marks (pink/red tones) */
.info-mark-1 { background-color: rgba(232, 192, 192, 0.1); }
.info-mark-2 { background-color: rgba(232, 192, 192, 0.15); }
.info-mark-3 { background-color: rgba(232, 192, 192, 0.2); }
.info-mark-4 { background-color: rgba(232, 192, 192, 0.25); }
.info-mark-5 { background-color: rgba(232, 192, 192, 0.3); }
.info-mark-6 { background-color: rgba(232, 192, 192, 0.35); }

/* Mobile Responsive */
@media (max-width: 900px) {
    .character-top-section,
    .character-details,
    .character-profile-flex {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .character-portrait,
    .character-portrait-large {
        height: 400px;
        max-width: 280px;
        margin: 0 auto;
    }
    
    .character-basic-info,
    .character-info-container {
        text-align: center;
    }
    
    .character-name,
    .character-name-stylized {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    .character-quote {
        margin-top: 1rem;
    }
    
    .trait-container {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .profile-container,
    #character-profile-container {
        width: 95%;
        margin: 1rem auto;
    }
    
    .character-top-section,
    .character-details,
    .character-profile-flex {
        padding: 1rem;
    }
    
    .character-portrait,
    .character-portrait-large {
        height: 350px;
        width: 100%;
        max-width: none;
    }
    
    .character-name,
    .character-name-stylized {
        font-size: 2rem;
    }
    
    .character-epithet {
        font-size: 1rem;
    }
}


/* Character Navigation */
.character-nav {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}

.character-nav li a {
    display: inline-block;
    width: 8rem;
    height: 1.625rem;
    line-height: 1.625rem;
    vertical-align: middle;
    text-transform: lowercase;
    font-family: 'Lexend Giga', serif;
    letter-spacing: 0.075rem;
    font-size: 0.625em;
    font-weight: 400;
    border-radius: var(--border-radius);
    box-shadow: 0rem 0rem 0.125rem 0rem rgba(255, 255, 255, 0.102);
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.259);
    color: var(--cream);
    backdrop-filter: blur(0.175rem);
}

.character-nav li a:hover {
    background-color: var(--glaucous);
}

.character-nav .c01 {
    background-color: var(--blue);
}

.character-nav .c02 {
    background-color: var(--brown);
}

.character-nav .c03 {
    background-color: var(--pink);
}

.character-nav .c04 {
    background-color: var(--green);
}

.character-nav .c05 {
    background-color: var(--gold);
}

/* Character Sections */        
.section-container {
    margin-bottom: 2rem;
    border-radius: var(--border-radius);
    background-color: var(--bg-light);
    backdrop-filter: blur(0.175rem);
    border: 1px solid var(--pink);
    padding: 1rem 1rem 1.5rem; /* Reduced top padding from 1.5rem to 1rem */
}

.category-title {
    text-align: center;
    color: var(--dark-text);
    font-family: 'Eagle Lake', serif;
    letter-spacing: 0.125rem;
    font-size: 1em;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

/* Character Gallery */
.character-gallery {
    margin-bottom: 1rem;
}

.character-gallery ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.character-gallery li {
    text-align: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.character-gallery li:hover {
    transform: translateY(-5px);
}

.thumbnail {
    display: block;
    text-decoration: none;
    outline: 0;
    cursor: pointer;
}

.frame {
    display: inline-block;
    position: relative;
    width: 120px;
    height: 120px;
    border: 0;
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius);
    transition: transform 0.5s ease;
}

.thumbnail:hover .frame img {
    transform: scale(1.05);
}

.caption {
    margin-top: 0.5rem;
    font-family: 'Garamond', serif;
    font-size: 0.75rem;
    letter-spacing: 0.05rem;
    color: var(--dark-text);
}

.caption p {
    margin: 0;
    padding: 0;
}

.caption strong {
    color: var(--glaucous);
    font-weight: 600;
}

.caption em {
    font-style: italic;
}

/* Span-based styling for label marks */
.detail-table span[class^="appearance-mark"],
.detail-table span[class^="info-mark"],
.character-table span[class^="appearance-mark"],
.character-table span[class^="info-mark"] {
    display: inline-block;
    width: 100%;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    color: var(--dark-text);
}

/* Appearance marks (blue tones) */
.appearance-mark-1 { background-color: rgba(106, 181, 181, 0.1); }
.appearance-mark-2 { background-color: rgba(106, 181, 181, 0.15); }
.appearance-mark-3 { background-color: rgba(106, 181, 181, 0.2); }
.appearance-mark-4 { background-color: rgba(106, 181, 181, 0.25); }
.appearance-mark-5 { background-color: rgba(106, 181, 181, 0.3); }

/* Information marks (pink/red tones) */
.info-mark-1 { background-color: rgba(232, 192, 192, 0.1); }
.info-mark-2 { background-color: rgba(232, 192, 192, 0.15); }
.info-mark-3 { background-color: rgba(232, 192, 192, 0.2); }
.info-mark-4 { background-color: rgba(232, 192, 192, 0.25); }
.info-mark-5 { background-color: rgba(232, 192, 192, 0.3); }
.info-mark-6 { background-color: rgba(232, 192, 192, 0.35); }

/* Title Banner Styles */
.title-banner {
    position: relative;
    width: 100%;
    height: 100px;
    margin-bottom: 1.5rem;
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.title-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, 
        rgba(42, 41, 50, 0.5), 
        rgba(77, 133, 133, 0.6), 
        rgba(42, 41, 50, 0.5));
    border-radius: var(--border-radius);
    border: 1px solid rgba(106, 181, 181, 0.3);
    box-shadow: 0 0 15px rgba(106, 181, 181, 0.2);
    overflow: hidden;
}

.title-backdrop::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://mokiverse.neocities.org/faebane/ui_images/header1.png');
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    filter: blur(1px);
}

.main-title {
    position: relative;
    font-family: 'Eagle Lake', serif;
    font-size: 3.5rem;
    color: var(--cream);
    text-shadow: 
        0 0 5px var(--glaucous),
        0 0 10px rgba(106, 181, 181, 0.7),
        0 0 15px rgba(106, 181, 181, 0.5),
        2px 2px 2px rgba(0, 0, 0, 0.5);
    margin: 0;
    z-index: 2;
    letter-spacing: 0.15rem;
    transform: translateY(-2px);
}

.title-accent {
    position: absolute;
    height: 2px;
    width: 120px;
    background: linear-gradient(to right, transparent, var(--glaucous), transparent);
    z-index: 2;
}

.title-accent.left {
    left: 50px;
    top: 50%;
    transform: translateY(-10px);
}

.title-accent.right {
    right: 50px;
    top: 50%;
    transform: translateY(10px);
}

/* Enhancement for existing glaucous glows */
.glaucous-glow {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(106, 181, 181, 0.3) 0%, rgba(106, 181, 181, 0) 70%);
    filter: blur(10px);
}

/* Media queries for title banner */
@media (max-width: 768px) {
    .title-banner {
        height: 80px;
    }
    
    .main-title {
        font-size: 2.5rem;
    }
    
    .title-accent {
        width: 80px;
    }
    
    .title-accent.left {
        left: 30px;
    }
    
    .title-accent.right {
        right: 30px;
    }
}

/* ==== CHARACTER PROFILE SECTIONS ==== */

/* Character Backstory - Original Style */
.character-backstory,
.character-backstory-container {
    padding: 1.5rem;
    margin: 0 1.5rem 1.5rem;
    background-color: rgba(232, 192, 192, 0.05);
    border-radius: var(--border-radius);
    position: relative;
}

.backstory-heading {
    font-family: 'Eagle Lake', serif;
    font-size: 1.2rem;
    color: var(--dark-text);
    margin-bottom: 1rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(232, 192, 192, 0.3);
    text-align: center;
}

.backstory-content,
#character-backstory {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--dark-text);
    position: relative;
}

.backstory-content::before,
#character-backstory::before {
    content: """;
    position: absolute;
    left: -1rem;
    top: -1rem;
    font-size: 4rem;
    color: var(--glaucous);
    opacity: 0.1;
    font-family: Georgia, serif;
}

/* Original Links Section */
.character-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    border-top: 1px solid rgba(232, 192, 192, 0.2);
}

.links-heading {
    font-family: 'Eagle Lake', serif;
    font-size: 1rem;
    color: var(--dark-text);
    margin-bottom: 0.75rem;
    text-align: center;
}

.links-buttons {
    display: flex;
    gap: 1rem;
}

/* Card Link Styles - Used in both layouts */
.card-link {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background-color: var(--bg-dark);
    color: var(--cream);
    border-radius: var(--border-radius);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    text-align: center;
}

/* Default Link Colors */
.card-link.venus-chub {
    background-color: var(--pink);
}

.card-link.catbox {
    background-color: var(--blue);
}

.card-link.all-characters {
    background-color: var(--glaucous);
}

/* Default Link Hover Effects */
.card-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}

.card-link.venus-chub:hover {
    background-color: #c48a8a;
}

.card-link.catbox:hover {
    background-color: #4a7c9b;
}

.card-link.all-characters:hover {
    background-color: #5a9d9d;
}

/* ==== NEW SIDE-BY-SIDE LAYOUT ==== */
/* Main container for backstory and links */
.character-bottom-section {
    display: flex;
    padding: 1.5rem;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

/* Scrollable backstory styling - left side */
.character-backstory-scrollable {
    flex: 3; /* Takes up 3/4 of the space */
    background-color: rgba(232, 192, 192, 0.05);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.backstory-scroll-container {
    height: 250px; /* Fixed height for scrolling */
    overflow-y: auto;
    padding-right: 0.5rem;
    /* Customized scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--glaucous) rgba(232, 192, 192, 0.1);
}

/* Webkit scrollbar styling */
.backstory-scroll-container::-webkit-scrollbar {
    width: 8px;
}

.backstory-scroll-container::-webkit-scrollbar-track {
    background: rgba(232, 192, 192, 0.1);
    border-radius: 10px;
}

.backstory-scroll-container::-webkit-scrollbar-thumb {
    background-color: var(--glaucous);
    border-radius: 10px;
}

/* Vertical links styling - right side */
.character-links-vertical {
    flex: 1; /* Takes up 1/4 of the space */
    display: flex;
    flex-direction: column;
    background-color: rgba(106, 181, 181, 0.05);
    border-radius: var(--border-radius);
    padding: 1.5rem;
}

.links-buttons-vertical {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.links-buttons-vertical .card-link {
    width: 100%;
    padding: 0.6rem 1rem;
    text-align: center;
    transition: all 0.2s ease;
}

/* Hover effects for vertical links */
.links-buttons-vertical .card-link:hover {
    transform: translateX(5px);
    box-shadow: -3px 3px 8px rgba(0,0,0,0.15);
}

/* Custom link colors for character-specific links */
.card-link.mountain-link {
    background-color: var(--brown);
}

.card-link.redmaple-link {
    background-color: #9a4e4e;
}

.card-link.lore-link {
    background-color: var(--gold);
}

.card-link.custom-link {
    background-color: var(--green);
}

/* Mobile responsive adjustments */
@media (max-width: 900px) {
    .character-bottom-section {
        flex-direction: column;
    }
    
    .character-backstory-scrollable,
    .character-links-vertical {
        width: 100%;
    }
    
    .links-buttons-vertical {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .links-buttons-vertical .card-link {
        width: auto;
    }
    
    .links-buttons-vertical .card-link:hover {
        transform: translateY(-3px);
        box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    }
}