body {
    background:	url('/bgimg.png'),
		url('/bgbottom.png'),
		url('/leftbar.png'),
		url('/rightbar.png'),
		url('/bgshadow.png');
    background-repeat:	repeat-x,
			repeat-x,
			repeat-y,
			repeat-y,
			repeat-x;
    background-position:	left top,
				left bottom,
				left top,
				right top,
				left top;
    background-color:#222222;
}

/* Define the fade-in keyframe animation */
@keyframes localizedFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.title {
    position:relative;
    top:-18px;
    display:block;
    margin:0 auto;
    overflow:hidden;
    z-index:-1;
	min-height: 160px;
}

.main-content-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Aligns columns to the top */
    margin-top: 20px;       /* Adjust this to position it nicely below your title */
    width: 100%;
}



/* Ensure leftbar content is centered and styled cleanly */
.leftbar {
    width: 200px;
    flex-shrink: 0; /* Prevents the sidebar from squeezing */
	text-align: center;
    font-family: "Times New Roman", Times, serif;
    font-size: 0.85rem; /* Equivalent to size="2" */
    color: #74bcee;
	
    /* Apply the pure CSS animation */
    opacity: 0;                            /* Start invisible */
    animation-name: localizedFadeIn;       /* Point to the keyframes above */
    animation-duration: 2s;                /* Take 2 seconds to fade in (2000ms) */
    animation-delay: 1s;                   /* Wait 1 second before starting (1000ms) */
    animation-fill-mode: forwards;         /* CRITICAL: Stays visible (opacity: 1) when finished */
}

/* Modern styling replacement for the old stacking <br> tags */
.leftbar .phase-label {
    display: block;
    margin: 15px 0;
}



.content {
    flex-grow: 1; /* Takes up all remaining middle space */
    min-height: 1000px; /* Keeps your original height requirement */
    padding: 0 20px;    /* Optional: adds nice breathing room between text and sidebars */
    padding-top: 20px;
}

/* Keeps inline images vertically aligned with text at their original dimensions */
.story-container p img {
    vertical-align: middle;
    margin: 0 2px; /* Small horizontal buffer space */
}

/* Centers and spaces out the row of cursor images */
.cursor-preview-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;           /* Puts clean, even spacing between each cursor asset */
    margin: 25px 0;      /* Replaces stacking <br> breaks with native margins */
}

/* Centers the download button asset on its own line */
.download-container {
    text-align: center;
    margin-top: 20px;
}

/* Keeps the download image looking clean and clickable */
.download-container img {
    display: inline-block;
    vertical-align: middle;
}



.rightbar {
    width: 200px;
    flex-shrink: 0; /* Prevents the sidebar from squeezing */
	text-align: center;
}

/* Container for the dynamic rightbar link elements */
.sidebar-links-group {
    text-align: center;
    font-family: "Times New Roman", Times, serif;
    font-size: 0.85rem; /* Replaces size="2" */
}

/* Turns each link into a block element so they stack naturally without <br> tags */
.sidebar-links-group a {
    display: block;
    margin-bottom: 8px; /* Adds perfect, consistent spacing between each link */
    text-decoration: underline;
}

/* Removes the bottom margin from the last link so there's no trailing dead space */
.sidebar-links-group a:last-child {
    margin-bottom: 0;
}

/* Style for section headers inside the sidebars */
.sidebar-links-group .sidebar-heading {
    display: block;
    font-weight: bold;
    margin: 15px 0 8px 0; /* Creates perfect spacing above and below the heading */
    color: #74bcee;       /* Keeps your signature light blue */
}



/* Style and center the global site footer */
.footer {
    position:relative;
    bottom:0px;
	text-align: center;
    font-size: 0.75rem; /* Equivalent to size="1" */
    color: #74bcee;
    padding-top: 15px;  /* Clean replacement for the initial <br> */
}

/* Give the footer paragraphs clean spacing without stacking <br> tags */
.footer p {
    margin: 5px 0 0 0;
}

a:link { color: #74BCEE; }
a:visited { color: #347CAE; }
a:hover { color: #84CCFE; }

/* Enable smooth transitions on the layout pieces */
#content-container, 
#title-container, 
#links-container {
    opacity: 1; /* Default to visible so your initial index structure displays immediately */
    transition: opacity 0.3s ease-in-out;
}

/* This utility class handles the temporary fade out during page swaps */
.fade-out {
    opacity: 0 !important;
}



/* Sidebar structure layout matching links.htm */
.sidebar-links-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Base styles for unlinked entries inside the accordion drop-downs */
.sidebar-links-group .unlinked-item {
    display: block;
    color: #549cce; /* Slightly dimmer tone to denote there is no page yet */
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    padding: 2px 0;
    text-align: center;
}

/* Adjustments for normal links inside the accordion drop-downs */
.sidebar-links-group .accordion-content a {
    display: block;
    padding: 2px 0;
    text-align: center;
    text-decoration: none;
}

/* Core Layout Container for the Esper Profiles */
.esper-profile {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px; /* Replaces &nbsp; spacing cleanly */
    text-align: left;
    font-family: "Times New Roman", Times, serif;
    font-size: 1rem;
    margin: 20px auto;
    max-width: 1100px;
}

/* Constrain and lock the artwork container width so dividers align across pages */
.esper-artwork {
    width: 750px;         /* Locks the column width so the vertical line never drifts */
    display: flex;
    justify-content: center; /* Keeps narrower art centered inside its space */
    flex-shrink: 0;       /* Prevents the browser from squeezing this area */
}

/* Ensure the image inside scales nicely up to that maximum boundary */
.esper-artwork img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Handle the vertical divider graphic tracking */
.esper-divider-v {
    height: 400px;
    width: 15px;
    display: block;
}

/* Right side content blocks */
.esper-info {
    flex-grow: 1;
}

.esper-info h3 {
    font-size: 1.5rem; /* Equivalent to size="5" */
    margin: 0 0 15px 0;
    font-weight: bold;
}

.esper-info p {
    margin: 5px 0;
}

.esper-info .stat-group {
    margin-top: 20px;
}

/* Handle the horizontal footer tracking line */
.esper-divider-h {
    display: block;
    width: 100%;
    height: 15px;
    margin-top: 25px;
}